htmlcssbackground-imagelinear-gradientsrepeating-linear-gradient

CSS Square background - image

I tried to make some square background using CSS only, but i got just line background without the option of horizontal lines.

This is my example code:

.container{
    background-color:red;
    width: 400px; height:200px; margin:0 auto;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%);
    background-size: 100px  100%;
}
<div class="container">

</div>

And this is the result that I am looking for enter image description here

This is the result that I got for now enter image description here

Solution

  • All you need is one conic-gradient:

    .container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  background:
    conic-gradient(from 90deg at 2px 2px,
      red 90deg,#0000 0) -2px -2px/50px 50px;
}
    <div class="container">

</div>

    In case you want to explicitly define the number of row/column that will adjust based on the element width/height you can do like below:

    .container {
  --nr: 3; /* number of rows */
  --nc: 6; /* number of columns */
  --b: 2px; /* border length */

  width: 400px;
  height: 200px;
  margin: 10px auto;

  background:
    conic-gradient(from 90deg at var(--b) var(--b),
      red 90deg,#0000 0) calc(-1*var(--b)) calc(-1*var(--b))/
      calc(100%/var(--nc)) calc(100%/var(--nr));
}
    <div class="container">

</div>

<div class="container" style="--nr:4;--nc:8;--b:3px">

</div>

    CSS square background with linear gradient

    You can also do it with mask in case you want more complex coloration:

    .container {  
  --nr:3; /* number of rows */
  --nc:6; /* number of columns */
  --b:2px; /* border length */

  width: 400px;
  height: 200px;
  margin: 10px auto;
  
  --m:
    conic-gradient(from 90deg at var(--b) var(--b),
      red 90deg,#0000 0) calc(-1*var(--b)) calc(-1*var(--b))/
      calc(100%/var(--nc)) calc(100%/var(--nr));
  -webkit-mask:var(--m);
          mask:var(--m);
          
  background:linear-gradient(135deg,red,blue);
}

body {
 background:linear-gradient(gray,white);
}
    <div class="container">

</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">

</div>

    enter image description here

    The above examples will create an homogeneous grid. You can also consider multiple gradient in order to control each line alone and build a custom grid.

    .container {
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background:
    /*vertical ones*/
    linear-gradient(blue,blue) center/2px 100%,
    linear-gradient(blue,blue) 25% 0/2px 100%,
    linear-gradient(blue,blue) 85% 0/2px 100%,
    /*horizontal ones*/
    linear-gradient(blue,blue) 0 25%/100% 2px,
    linear-gradient(blue,blue) 0 75%/100% 2px,
    
    red;
  background-repeat:no-repeat;
}
    <div class="container">

</div>