CSS Gradient skipping colors

Question

I have a css class for a whole page background. The idea is that in between every color, and inside every color there would be a black line, but it is skipping some of those black lines.

Right now it is skipping the 2nd, 3rd, 5th and 7th lines.

I'm using NextJS, with css and some tailwindcss.

This is the code:

 <main
   className={`w-screen h-screen flex items-center justify-center  ${styles.targetBackground} `}
 >

.targetBackground {
  background: linear-gradient(225deg, #F5ED32 0% 10%, #000 10.1%, #F5ED32 10.3% 20%, #000 20.1% 20.2%, #F3130C 20.3% 30%, #000 30.1%, #F3130C 30.3% 40%, #000 40.1%, #3CB9CA 40.3% 50%, #000 50.1%,#3CB9CA 50.3% 60%, #000 60.1% 70%, #fff 70.1%, #000 70.3% 79.9%, #fff 80% 90%, #000 90.1%, #fff 90.3% 100%);
}

Final code that works, I just increased the pixel size on Temani's solution:

.targetBackground {
  --l: 8px;
  background: linear-gradient(225deg, 
   #F5ED32 0 10%, #000 0 calc(10% + var(--l)), 
   #F5ED32 0 20%, #000 0 calc(20% + var(--l)), 
   #F3130C 0 30%, #000 0 calc(30% + var(--l)),
   #F3130C 0 40%, #000 0 calc(40% + var(--l)), 
   #3CB9CA 0 50%, #000 0 calc(50% + var(--l)),
   #3CB9CA 0 60%, #000 0 calc(60% + var(--l)),
   #000    0 70%, #fff 0 calc(70% + var(--l)), 
   #000    0 80%, #fff 0 calc(80% + var(--l)), 
   #fff    0 90%, #000 0 calc(90% + var(--l)),
   #fff    0);
  
  height:100vh;
}

Nope, firefox removes the line between reds, and adds the line between blacks. — Luis
– Luis, Commented Mar 21, 2022 at 22:48

Temani Afif · Accepted Answer · 2022-03-21 22:06:27Z

2

Consider pixel value to define the thickness of that line and avoid rounding issues.

Here is an updated version of your gradient with a better syntax and the line thickness as a CSS variable:

html {
 --l: 3px;
 background: linear-gradient(225deg, 
  #F5ED32 0 10%, #000 0 calc(10% + var(--l)), 
  #F5ED32 0 20%, #000 0 calc(20% + var(--l)), 
  #F3130C 0 30%, #000 0 calc(30% + var(--l)),
  #F3130C 0 40%, #000 0 calc(40% + var(--l)), 
  #3CB9CA 0 50%, #000 0 calc(50% + var(--l)),
  #3CB9CA 0 60%, #000 0 calc(60% + var(--l)),
  #000    0 70%, #fff 0 calc(70% + var(--l)), 
  #000    0 80%, #fff 0 calc(80% + var(--l)), 
  #fff    0 90%, #000 0 calc(90% + var(--l)),
  #fff    0);
 
 height:100%
}

answered Mar 21, 2022 at 22:06

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luis Over a year ago

Syntax is a lot better, thank you! But the issue persists, I'll update and attach an image.

Collectives™ on Stack Overflow

CSS Gradient skipping colors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related