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:
#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
0 also works because the browser will autocorrect it to the largest previously defined
#e50e7e 0 33%,
#f7ea1e 0 66%,
#66b32d 0 100%
Live example on CodePen:
This article has been published on on my blog. Here's a list of all articles if you're interested in this kind of stuff.
If you have feedback, questions, or want to comment on this, please send me an e-mail or contact me through any other channel.