HTML and CSS Reference
In-Depth Information
Using Multiple Gradients
Because CSS gradients are applied using the
background-image
property, you can add multiple gradients as the
background to an element by listing the gradient definitions separated by commas. The gradients are applied in
reverse order, with the first one appearing in front. Because gradients normally fill the entire background, you
need to set the final color stop to
transparent
on gradients that appear in front. Alternatively, you can control the
size and position of individual gradients with the
background-size
and
background-position
properties.
Radial gradients using the standard syntax are particularly suited for use as multiple gradients because the
radial-gradient()
function allows you to set the size of the gradient precisely using lengths (for both circles and
ellipses) or percentages (for ellipses). To demonstrate the sort of effect you can achieve, multiple_gradients.html
contains the following style:
#ball {
width: 100px;
height: 100px;
margin: 20px;
background-color: #C51D31;
border-radius: 50%;
background-image: radial-gradient(circle 12px at 25px 30px, rgba(255,255,255,0.8),
transparent),
radial-gradient(circle at 30% 30%, #C51D31, #921524, #450A11);
}
The
ball<div>
is a
100px
square with its
border-radius
set to
50%
, which converts it to a circle.
The first radial gradient is a
12px
circle positioned
25px
from the left and
30px
from the top. Its first color stop
is white with
80%
alpha transparency, and its final color stop is
transparent
.
The second gradient appears behind the first one. It's also a circle, positioned at
30%
both horizontally and
vertically, offsetting it to the upper left. No size has been declared, so it fills the background to
farthest-corner
.
The three color stops are increasingly deeper shades of red. Figure
19-22
shows the result.
Figure 19-22.
Superimposing two radial gradients on top of each other creates a 3D highlight effect
Creating the same effect with browser-specific prefixes isn't possible with Firefox 15 and earlier because
-moz-radial-gradient()
doesn't support setting the size of the gradient explicitly. For WebKit and Opera, you
omit the
circle
or
ellipse
keyword, and specify two dimensions instead. This is how the two gradients are
defined for Opera:
background-image: -o-radial-gradient(25px 30px,
12px 12px
, rgba(255,255,255,0.8),
transparent),
-o-radial-gradient(30% 30%, circle, #C51D31, #921524, #450A11);