CSS Gradient skipping colors-CodePudding

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;
}

CodePudding user response：

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%
}