CODEWITHSUNDEEP
csslinear-gradients
Axiol
Axiol

Reputation: 5962

Grid with gradient

I'm trying for make a simple grid with gradient. And here is where I'm a for the moment 

body {
  background: #f3f3f3;
  background: linear-gradient(90deg, #f3f3f3 10vw, #dbdbdb calc(10vw + 1px), #f3f3f3 calc(10vw + 2px), #f3f3f3 calc(90vw - 2px), #dbdbdb calc(90vw - 1px), #f3f3f3 90vw);
}

Problem is, it only works when the screen size is quite small. And I don't really get why. Is it because the specific vw does not end up on pixel precisely?

Upvotes: 1

Views: 1044

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

You want to draw two vertical lines so you can optimize the code like below and avoid any issue related to subpixel rendring.

body {
  background:
   /* color                         position        / width height*/
   linear-gradient(#dbdbdb,#dbdbdb) left  10% top 0 / 1px   100%,   /*1st line*/
   linear-gradient(#dbdbdb,#dbdbdb) right 10% top 0 / 1px   100%,   /*2nd line*/
   #f3f3f3; /* background color */
  background-repeat:no-repeat;
  
  margin:0;
  height:100vh;
}

Or like below if the size will remain the same:

body {
  background:
   linear-gradient(#dbdbdb,#dbdbdb) left  10% top 0, 
   linear-gradient(#dbdbdb,#dbdbdb) right 10% top 0,
   #f3f3f3;
  background-size:1px 100%;
  background-repeat:no-repeat;
  
  margin:0;
  height:100vh;
}

Upvotes: 2

Related Questions