Stripes look cool in the background and are very easy to create using repeating gradients. CSS has the properties
repeating-radial-gradient which we can use to create stripes. These two properties are widely supported in all browsers - Firefox 10+, Chrome 26+, Safari 6.1+, IE 10, 11 and Opera 11.6+ (use prefixes for ancient browsers). That means, you can spice up your next project with gradient stripes without worrying about browser support.
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
These examples should help you understand better.
There's no magic happening here. It is exactly the same as normal linear or radial gradients. Here, think of each stripe as a separate container which has a gradient background having same color at both ends. The first two color-stops act as the endpoints of the first container's gradient. The above code reads: From the top, start with dark blue from 0px and end with dark blue at 20px. Then start with light blue from 20px and end with light blue at 40px. Repeat the steps.
Just change the direction towards right or left to create vertical stripes.
Use any angle to create diagonal stripes.
repeating-radial-gradient to create radial stripes.
Why stop at only two colors when CSS doesn't get angry with more.
I hope you learnt something new from this quick tutorial and this motivated you to keep creating beautiful things with CSS.