HTML and CSS Reference
In-Depth Information
figure 8-23
A linear gradient with color stops
orange
yellow 40%
green 50%
yellow 60%
orange
background:
linear-gradient(orange, yellow 40%, green 50%, yellow 60%, orange)
Note that if no color stop is assigned to the first color in the list, it is placed at the
0% position; and if no color stop is assigned to the last color in the list, it is placed at the
100% position.
You can try creating your own linear gradients using the
demo_linear_gradients.htm
file in the tutorial.08/demo folder.
Creating Radial Gradients with CSS3
The other type of gradient supported by CSS3 is a
radial gradient
in which color blend-
ing starts from a single point within the object and proceeds outward in a circular or
elliptical shape, as shown in Figure 8-24.
figure 8-24
A radial color gradient of three colors
radial gradient
background: radial-gradient(red, yellow, blue)
To create a radial gradient in CSS3, use the
radial-gradient()
function
radial-gradient(
center
,
shape size
,
color-stop
,
color-stop
, … )
where
center
is the position of the radial gradient's center,
shape
is the gradient's
shape,
size
is the size of the gradient, and each occurrence of
color-stop
is a color
and its position within the radial gradient. If you don't define the position of the color
stops, they are evenly distributed across the gradient.
The default starting position is the horizontal and vertical center of the object, but you
also can specify the starting position using the keywords
top
,
bottom
,
left
,
right
, and
