5.6. Linear Gradients; Introducing Vendor Prefixes

Linear gradients are a type of image that gradually transitions from one color to the next horizontally, vertically or diagonally. You can transition between as many colors as you like and specify the points at which to change colors, called color-stops, represented in pixels or percentages along the gradient line—the angle at which the gradient extends. You can use gradients in any property that accepts an image.

Creating Linear Gradients

In Fig. 5.4, we create three linear gradients—vertical, horizontal and diagonal—in separate rectangles. As you study this example, you’ll notice that the background property for each of the three linear gradient styles (vertical, horizontal and diagonal) is defined multiple times in each style—once for WebKit-based browsers, once for Mozilla Firefox and once using the standard CSS3 syntax for linear gradients. This occurs frequently when working with CSS3, because many of its features are not yet finalized. In the meantime, many of the browsers have gone ahead and begun implementing these features so you can use them now. Later in this section, we’ll discuss the vendor prefixes that allow us to use many of CSS3’s evolving features.