Repeating gradients

CSS3 also gives us the ability to create repeating background gradients. Let's take a look at how it's done:

.repeating-radial-gradient {
    background: repeating-radial-gradient(black 0px, orange 5px, red 10px);
}

Here's how that looks (don't look for long, may cause nausea):

Firstly, prefix the linear-gradient or radial-gradient with repeating, then it follows the same syntax as a normal gradient. Here I've used pixel distances between the black, orange, and red colors (0px, 5px, and 10px respectively) but you could also choose to use percentages. For best results, it's recommended to stick to the same measurement units (such as pixels or percentages) within a gradient.

Note

Read the W3C information on repeating gradients at http://www.w3.org/TR/css3-images/.

There's one more way of using background gradients I'd like to share with you.