It all started with this question Keith Clark recently asked on twitter.
CSS repeating-linear-gradients, do we need these? Can’t the same thing be achieved with a linear-gradient and background-size?
That’s a good question.
Their cousin, repeating radial gradients, definitely come in handy. They have saved me from having to write tens of stops inside a regular radial-gradient when I wanted to reproduce the look of a vinyl record with CSS.
repeating-radial-gradientBut repeating-linear-gradient?
Until this year, I was also convinced they’re useless. But in early February, while working on a canvas demo, I fell into the trap of styling the control panel for that demo and ended up reproducing over 100 slider designs I found online, each with the (self-imposed) restriction that I should use just one range input per slider.
Warning: while I did learn a lot creating them, I never went back to apply what I learned along the way to the sliders I had already coded, so, with the exception of the last few, I wouldn’t really recommend them as a good resource. Also: if I never have to style another range input again, it will be too soon.
Some of these styled range inputs had striped fills or rulers, so they required using gradients, particularly repeating linear gradients, quite a bit. I used repeating linear gradients precisely because it turned out normal linear gradients were not enough. Let’s see why!
We start by recreating the following pattern:
It has black and blue stripes, blue stripes being twice as wide as the black ones. If the black stripes have a width of .25em, the code to get this effect with repeating-linear-gradient is:
background: repeating-linear-gradient(135deg, #000, #000 .25em /* black stripe */, #0092b7 0, #0092b7 .75em /* blue stripe */
);The gradient starts from the top left corner at an angle of 135
