Create Striped Backgrounds with CSS

A quick tutorial to show how gradients can be used to create stripes

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.

Vertical Stripes

Just change the direction towards right or left to create vertical stripes.

Diagonal Stripes

Use any angle to create diagonal stripes.

Radial Stripes

Use repeating-radial-gradient to create radial stripes.

Why stop at only two colors when CSS doesn’t get angry with more.

Similarly, you can create different colorful patterns with CSS easily and use them in your website. You can try recreating the pattern screenshot at the top of the page. Having said that, I hope you learnt something new from this quick tutorial and this motivated you to keep creating beautiful things with CSS.

Happy Coding!😎

Originally published at https://dev.to on December 30, 2020.