CSS3 Repeating Gradients [CSS3 Tips]

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

There are many CSS3 features that change the way we decorate a website, one of which is CSS3 Gradients. Prior to CSS3, we definitely need images to create the gradient effect; now we are able to deliver the same (and better) effects by only using CSS

In our previous posts, we have discussed two types of gradients that can be achived with CSS3:

Radial and

Linear Gradients.

This time we are going to look into their sibling: repeating gradients.

Basic Repeating

Repeating Gradients is essentially an extension. The syntax is similar to how we define Radial and Linear gradients, only that as the name implies, it will also repeat the colors in a specified direction. To repeat linear gradients, we can use this function: repeating-linear-gradient, while to repeat radial or elliptical gradients we use this function: repeating-radial-gradient.


/*Linear*/
.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
}

/*Radial*/
.gradient {
	background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
}

There is not much difference for the rest on the code, except for the color repetition. Below is a simple illustration to describe how this color repetition works.

Although the image above only illustrates for repeating linear gradients, the basic idea also applies to radial gradients in which the colors will repeat infinitely, in this case, in any direction. Follow the link below to see the demo.

View Demo

In the next section, we will show you how we can make use of CSS3 Repeating Gradients in real examples.

Example: Creating Patterns

The most common implementation of Repeating Gradients is to create background patterns. In this example, we are going to create simple vertical-stripe patterns.


.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}

Notice how we define two different colors – #f9f9f9 and #cccccc – in the same spot, 20px. This example will sharpen the difference between these two colors and eliminate the fuzziness.

To direct the orientation we simply change the angle – 90deg will direct it horizontally while 45deg will direct it diagonally and so on.

View Demo

Example: Creating Paperline

In this second example, we are going to create a paperline that you might often see in a notebook. To create this effect, we only need a div, no images, only CSS.


.gradient {
	width: auto;
	height: 500px;
	margin: 0 50px;
	background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background-size: 100% 21px;
}

Notice we also added CSS3 background-size property to specify the sizes of background images for 100%, 20px. Although CSS3 Gradients display ‘colors’, it’s actually categorized as image, not color.

Next, we will use :before pseudo-element to add a stripe on the left side of the paper.


.gradient:before {
	content: "";
	display: inline-block;
	height: 500px;
	width: 4px;
	border-left: 4px double #FCA1A1;
	position: relative;
	left: 30px;
}

And we are done, it’s really simple right? We can now see them all in action from the links below.