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

Gradients 129

Figure 11-10: Comparing extent keywords for radial gradients

All four gradients produce the same circular shape. In examples 

and , both gradients have the same center position and color-stops, but

the extent of  is set by the closest-corner keyword, making the extent of the

gradient be the closest corner (the bottom left), whereas the extent of 

is the closest side (left, set with closest-side), so this second circle is much

smaller than the previous one.

The gradients in examples  and x have the same center position

(the bottom-left corner of the element) and each has four color-stop values

(alternating black-white). The extent of example  is the farthest corner

(top-right, set with farthest-corner), whereas example x has an extent of the

farthest side (the right, and you’ve probably guessed by now that it’s set with

farthest-side). Although subtle, you should be able to see that the extent

of x is more limited than that of .

Using Multiple Color-Stop Values

As with their linear counterparts, radial gradients can accept multiple

color-stop values and length or percentage values for positioning con-

trol. Any such qualifiers are entered in a comma-separated list. The four

examples in the following listing demonstrate some interesting variations.

Figure 11-11 shows the results of each line.

 .gradient-1 { background-image: radial-gradient(farthest-side circle, black, white, black); }
 .gradient-2 { background-image: radial-gradient(farthest-side circle, black, white 25%,
black); }
 .gradient-3 { background-image: radial-gradient(farthest-side circle at left, white,
black 25%, white 75%, black); }
x .gradient-4 { background-image: radial-gradient(circle closest-side circle at 40% 50%,
white, white 25%, black 50%, white 75%, black); }

F i g u r e 11 - 11: Different color-stop values for radial gradients

In example , I’ve created a gradient with three color-stops (black-

white-black) that radiates from the center of the box to its farthest side.

The example at  is similar, except that the color-stop begins at 25 percent

along the length of the radius.