HTML and CSS Reference
In-Depth Information
Gradients
CSS3 gradients allow you to add background gradients to elements without
needing to use repeating images. This can save bandwidth and allow you to
create gradient backgrounds that scale, depending on screen size and
orientation. CSS3 gradients are vendor specific for now. Each vendor appears to
have their own way to produce CSS3 gradients. This section will focus on the
WebKit implementation.
There are two types of gradients that you may use in CSS3: linear and radial.
Linear gradients will flow from one side of the screen to the other, and radial
gradients will emanate from a central point outward, as shown in Figure 5-8.
Figure 5-8.
Linear (left) and radial (right) gradients
Linear Gradients
A linear gradient has the following syntax and must be applied as a background
using the
background
property.
.box {
background: -webkit-linear-gradient(start, start-color, end-color);
}
You may specify the start position as either a single position (left, top, right,
bottom) or a combination of these positions. For instance, to start a linear
gradient from the bottom-left corner, you can use the following code.
.box {
background: -webkit-linear-gradient(bottom left, green, red);
}
