HTML and CSS Reference
In-Depth Information
FIGURE 4.19 A simple radial
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).
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 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!
Search WWH ::

Custom Search