Responsive Web Design with HTML5 and CSS3 - Second Edition

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 ...