Creating Gradients Without Images - Beginning CSS3 - page 413

CHAPTER 19

Creating Gradients Without Images

A gradient creates a smooth transition between two or more colors, and is often used in graphic design to
create an illusion of depth or a 3D effect. Until quite recently, the only cross-browser way to add a gradient to an
element was to use a background image. With CSS3, you can generate a gradient simply by specifying its colors
and shape. CSS supports both linear gradients —in which the colors fade smoothly from one to the next in a
straight line—and radial gradients , which emerge from a single point with the colors spreading out in a circle or
ellipse. You can also create gradients that repeat the same sequence of colors indefinitely.
Browsers began implementing CSS gradients before the CSS3 Image Values and Replaced Content module
( http://dev.w3.org/csswg/css3-images/ ) had stabilized. As a result, the syntax has undergone a bewildering
number of changes. In mid-2012, it was announced that IE 10 and Firefox 16 would implement the final syntax
without browser-specific prefixes. However, WebKit-based browsers, Opera, and earlier versions of Firefox use a
slightly different syntax, which works only with browser-specific prefixes.
This chapter concentrates primarily on the final syntax. Separate sections explain the main differences in the
nonstandard syntax.
In this chapter, you'll learn how to do the following:

• Create a linear gradient

• Specify the direction of the gradient

• Define the size, shape, and position of a radial gradient

• Create a repeating gradient

■ Note The examples in this chapter use browser-specific prefixes only when they require a different syntax.

CSS Gradient Basics
Although CSS gradients don't use images, you apply them to an element using the background-image property
or the shorthand background property. You define a gradient by setting the property value with one of the four
functions listed in Table 19-1 .