Repeating gradients

CSS 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, it may cause nausea):

Figure 7.5: You can use repeating gradients to create all manner of visual effects

Firstly, prefix the linear-gradient or radial-gradient with repeating-. It then 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.

You can read the W3C information on repeating gradients at http://www.w3.org/TR/css3-images/#repeating-gradients.

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