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:

Published: February 15th, 2020
Tags: til,CSS
References: