ENHANCING BOXES WITH CSS3 BLING - Practical CSS3: Develop and Design - page 123

FIGURE 4.19 A simple radial
gradient.

RADIAL GRADIENTS

Radial gradients work a bit differently than linear gradients. Instead of traveling
across a container from one side to another, they radiate outwards from a single
point. Here is a simple example:

background: radial-gradient(50% 50%, 60% 60%, rgb(75, 75, 255),
p rgb(0, 0, 0));

This produces the result shown in Figure 4.19 (if you want to experiment with
this code, download the radial-gradient-test.html file in the chapter4 folder).

UPDATED RADIAL GRADIENT SYNTAX

The syntax of radial gradients has also been recently changed in the spec. Although this new syntax is much
further behind that of linear gradients—it has no current browser implementations—it may well be imple-
mented in the not-too-distant future. Explore http://dev.w3.org/csswg/css3-images/#radial-gradients for
more details. As an example, the first example shown in this section would be rewritten as:

background: radial-gradient(60% circle at 50% 50%, rgb(75, 75, 255), rgb(0, 0, 0));

NOTE: Radial-gradient-app.html is also included in the code down-
load: This works in the same way as linear-gradient-app.html but with
different radial gradient presets plugged in. Use it to play!