CSS Gradient double position syntax
If you want to use a gradient to define a sequence of stripes without a smooth transition
between the colors, you don't have to define a color stop for the start and end of each
stripe but you can use the double position syntax. You just define the color and two positions
for each color stop:
.stripes {
background-image: linear-gradient(45deg,
#e50e7e 0% 33%,
#f7ea1e 33% 66%,
#66b32d 66% 100%
);
}
And better yet, you don't have to repeat the start position for each color stop. Setting it
to 0
also works because the browser will autocorrect it to the largest previously defined
position:
.stripes {
background-image: linear-gradient(45deg,
#e50e7e 0 33%,
#f7ea1e 0 66%,
#66b32d 0 100%
);
}
Live example on CodePen: