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

128 Chapter 11

The result shown in Figure 11-9 is more circular than Figure 11-8,

although lacking a clearly defined edge. (You’ll learn how to set the extent

of a radial gradient shortly.)

Figure 11-9: A circular radial gradient

The default center of a radial gradient (from which the gradient

radiates) is at the center of the element it’s applied to. You can change

this point by adding a position argument to the radial-gradient() function.

The values used to set this position are exactly the same as those used in

background-position—that is, a length, percentage, or keywords. You add the

position after the shape keyword (circle, in the example shown here), pre-

ceded by the word at. The position is set to the center-right of the element:

E { background-image: radial-gradient(circle at 100% 50%, white, black); }

You can also set the extent of a gradient—that is, the point where the

gradient ends—using a length or position value or one of four extent key-

words. The extent argument is placed immediately after the shape keyword.

For example, this code creates a circular gradient, the extent of which is

50px, meaning it finishes 50px from the center point:

E { background-image: radial-gradient(circle 50px, black, white); }

The four possible keywords that you can use when setting the extent are

closest-corner, closest-side, farthest-corner (the default), and farthest-side.

The next listing illustrates the differences among the keywords, with the

result of each line shown in Figure 11-10. I’ll discuss each rule in turn.

 .ext1 { background-image: radial-gradient(closest-corner circle at 10% 60%, white, black); }

 .ext2 { background-image: radial-gradient(closest-side circle at 10% 60%, white, black); }

 .ext3 { background-image: radial-gradient(farthest-corner circle at 0% 100%, white, black,

white, black); }

x .ext4 { background-image: radial-gradient(farthest-side circle at 0% 100%, white, black,

white, black); }