DEV Community

Cover image for How to Create Striped Backgrounds with CSS
Shounak Das
Shounak Das

Posted on • Updated on

How to Create Striped Backgrounds with CSS

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, ...); 
Enter fullscreen mode Exit fullscreen mode

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.

I hope you learnt something new from this quick tutorial and this motivated you to keep creating beautiful things with CSS.

Happy Coding!๐Ÿ˜Ž

Top comments (2)

Collapse
 
ignacioprados profile image
Ignacio Prados • Edited

Awesome!!! Im going to start using it ๐Ÿ˜„

Collapse
 
snkds profile image
Shounak Das

Cool ๐Ÿ‘

Some comments may only be visible to logged-in visitors. Sign in to view all comments.