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:

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.

Tags: til,CSS
References: