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.
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)
Awesome!!! Im going to start using it ๐
Cool ๐
Some comments may only be visible to logged-in visitors. Sign in to view all comments.