Gradients 127
• The first example () uses three color-stops and sets the direction so
the gradient goes from right to left. The gradient covers 25 percent
of the element, so the black-white-black pattern is repeated four times.
• The second example () uses an angle value of 45deg so the gradient is
diagonal and uses pixel units for the color-stops. Again the gradients
are black-white-black, but they’re distributed unequally so the black-
white covers 2px, whereas the white-black covers 8px.
• The last example () uses four color-stops: black-black over 2px and
then white-white over 2px. The low length values prevent a gradual
change between the two colors, creating the hard diagonal lines you
see here.
Radial Gradients
A radial gradient is a gradual transition between colors that moves out from
a central point in all directions. At its simplest, a radial gradient gradually
changes between two colors in a circular or elliptical shape. Radial gradi-
ents are defined with the radial-gradient() value function, and, as with lin-
ear gradients, the simplest way to create one is to pass two color values in as
arguments:
E { background-image: radial-gradient(white, black); }
This results in a simple, two-color, white-black gradient in an ellipse
that extends to the farthest corner of its parent element, as shown in
Figure 11-8.
Figure 11-8: A simple two-color radial gradient
Using Radial Gradients
You can set the shape of a radial gradient by adding a keyword before the
color-stops. The default is ellipse, but you can use the alternative circle
like this:
E { background-image: radial-gradient(circle, white, black); }
