The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

130 Chapter 11

In example , the gradient begins at the left side of the box and ends

at the right side, with color-stops at 25 and 75 percent of the length. The

example at x uses five colors, but by specifying both the first and second

color-stops to use the same color I’ve created the solid-white circle in the

center.

Repeating Linear Gradients

Just as the linear-gradient() function has repeating-linear-gradient(), a

repeating-radial-gradient() can be used to repeat the supplied arguments

until the limit specified in the final color-stop is reached. For example, the

following code creates a circular gradient that repeats black-white every

20 percent until its extent is reached. The result is displayed in Figure 11-12.

E { background-image: repeating-radial-gradient(circle, black, white 20%); }

Figure 11-12: A repeating radial gradient

For some further demonstrations of what you can do with repeat-

ing radial gradients, see the next block of code. The result is shown in

Figure 11-13.

 .gradient-1 { background-image: repeating-radial-gradient(circle farthest-corner at right top,

black, white 10%, black 15%); }

 .gradient-2 { background-image: repeating-radial-gradient(circle farthest-corner at left,

white, white 10px, black 15px); }

 .gradient-3 { background-image: repeating-radial-gradient(circle farthest-corner, white,

black 1px, white 2px); }

Figure 11-13: Patterns created with repeating radial gradients