132 Chapter 11
MulTiPle ColuMnS
Because gradients are applied with the background-image property, you can
use CSS3’s multiple background values’ syntax (see Chapter 8) to apply
multiple gradients to an element using comma-separated values. This next
listing shows two examples. The first uses linear gradients; the second uses
radial gradients. Figure 11-14 shows the results of each example..linears {
background-image:
linear-gradient(to right bottom, black, white 50%, transparent 50%),
linear-gradient(to left bottom, black, white 50%, black 50%);
}
.radials {
background-image:
radial-gradient(closest-side circle at 20% 50%, white, black 95%, transparent),
radial-gradient(closest-side circle at 50% 50%, white, black 95%, transparent),
radial-gradient(closest-side circle at 80% 50%, white, black 95%, transparent);
}Figure 11-14: Multiple gradient background valuesThe example at left shows two linear gradients applied to an element:
from top left to bottom right, and from top right to bottom left. The final
color-stop has a value of transparent to allow the second gradient to show
through below it. (Remember, if you don’t set transparency, the gradient
will fill the rest of the box and hide the layer below it.) The example at
right shows three radial gradients, each of which extends to the closest side,
with the center of each at a different point. As with the first example, the
last color-stop has a value of transparent to allow the layers below to show
through.Summary
For all the historical problems with CSS gradients, the final syntax is quite
elegant and capable of delivering a wide array of beautiful background
effects. For a taste of what’s possible, see Lea Verou’s CSS3 Patterns Gal-
lery at http://lea.verou.me/css3patterns/ for some effects that really push the
envelope—although keep in mind my warning at the beginning of the
chapter about performance, as some of these examples can be quite tax-
ing on your mobile browser.