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

126 Chapter 11

Linear Gradients

Rather than create only a single gradient from one side of an element to

another, you can repeat the same gradient until the element is filled using

the repeating-linear-gradient() function. This function accepts the same

fundamental set of values as linear-gradient except that a length or percent-

age value is required for the final color-stop. Here’s an example:

E { background-image: repeating-linear-gradient(white, black 25%); }

This final color-stop value sets the point at which the gradient should

end and then start repeating. This code creates a top-bottom gradient (the

default) between white and black that covers 25 percent of the height of the

box, meaning it repeats four times, as shown in Figure 11-6.

Figure 11-6: A white-to-black repeating gradient

The next code examples use different values; Figure 11-7 shows the

result, and I’ll explain each, in turn, after you’ve had a chance to look at

the code.

.gradient-1 {

background-image: repeating-linear-gradient(to left, black, white, black 25%);

}

.gradient-2 {

background-image: repeating-linear-gradient(45deg, black, white 2px, black 10px);

}

.gradient-3 {

background-image: repeating-linear-gradient(315deg, black, black 2px, white 2px, white 4px);

}

Figure 11-7: Different repeating linear gradients





