Usually, we would create a separate bitmap image and need an image editor every time we needed to make changes. Some might use SVG instead, but it’s still a separate file and the syntax is far from friendly. Wouldn’t it be awesome if we could create stripes directly in our CSS? You might be surprised to find that we actually can.
Linear gradients...
The code for vertical stripes is almost the same, with one main differ- ence: an extra first argument that specifies the gradient direction.
We might attempt to create diagonal stripes (45°) by just changing the background-size and direction of the gradient again.
A little- known fact is that linear-gradient() and radial-gradient() also have repeating versions: repeating-linear-gradient() and repeating-radial-gradient(). These work exactly the same way, with one difference: the color stops are repeated indefinitely, until they fill up the whole image.
Instead of specifying separate colors for every stripe, we can specify our darkest color as the background color, which will show through stripes with semi-transparent white.