HTML and CSS Reference
Table 19-1. CSS Gradient Functions
Sets the direction and colors of a gradient that fades from one color to
the next in a straight line. The direction can be set using keywords or an
angle. If the direction is omitted, the gradient is drawn from the top to
Creates a circular or elliptical gradient, and optionally sets its shape,
size, and position. If all optional features are omitted, an elliptical
gradient is centered in the element's background.
Creates a linear gradient, in which the colors are repeated infinitely in
Creates a radial gradient that repeats infinitely.
Browsers draw the gradient inside a gradient box . By default, this fills the element's padding box
(see Figure 8-18 in Chapter 8). The gradient doesn't have any intrinsic dimensions, but you can control its size
and position in the same way as a background image using the background-size and background-position
properties, which were covered in Chapter 8.
Using Browser-Specific Prefixes
Normally, browser-specific prefixes are added to the property name. However, gradients use the standard
background-image and background properties, so the prefix is added to the function name instead. At the time
of this writing, only IE 10 and Firefox 16 support the standard functions listed in Table 19-1 . To support other
browsers, add the appropriate browser-specific prefix to the function name. For example, the browser-specific
versions of linear-gradient() look like this:
-moz-linear-gradient() Firefox 15 and earlier
-webkit-linear-gradient() Safari, Chrome, and other WebKit-based browsers
■ There are several online Css gradient generators that create all the necessary style rules for you. The one
at www.colorzilla.com/gradient-editor handles both linear and radial gradients, and is simple to use. Adobe
Fireworks Cs6 also generates the necessary style rules from a graphic gradient. Even if you decide to use a tool to
create Css gradients, it's useful to know what the code means so you can tweak it manually if necessary.
Specifying Gradient Colors
You define a gradient by specifying color stops along an imaginary gradient line . Figure 19-1 shows a linear
gradient that fades from a dark color to a lighter one as it moves from left to right across the gradient box.
The direction of the gradient line depends on the value passed to the linear-gradient() function.