How to Create Striped Backgrounds with CSS

#html #css #webdev #tutorial

Stripes look cool in the background and are very easy to create using repeating gradients. CSS has the properties repeating-linear-gradient and 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.

Syntax

 background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

These examples should help you understand better.

Horizontal Stripes

Working
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.