HTML and CSS Reference
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:
background-image: radial-gradient(circle 12px at 25px 30px, rgba(255,255,255,0.8),
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),
-o-radial-gradient(30% 30%, circle, #C51D31, #921524, #450A11);