5.7. Radial Gradients

Radial gradients are similar to linear gradients, but the color changes gradually from an inner point (the start) to an outer circle (the end) (Fig. 5.6). In this example, the radial-gradient property (lines 16–18) has three values. The first is the position of the start of the radial gradient—in this case, the center of the rectangle. Other possible values for the position include top, bottom, left and right. The second value is the start color (yellow), and the third is the end color (red). The resulting effect is a box with a yellow center that gradually changes to red in a circle around the starting position. In this case, notice that other than the vendor prefixes, the syntax of the gradient is identical for WebKit browsers, Mozilla and the standard CSS3 radial-gradient.