CSS: The Definitive Guide, 5th Edition

Chapter 9. Gradients

Three image types defined by CSS are described entirely with CSS: linear gradients, radial gradients, and conic gradients. Each type has two subtypes: repeating and nonrepeating. Gradients are most often used in backgrounds, though they can be used in any context where an image is permitted—as in list-style-image and border-image, for example.

A gradient is a visual transition from one color to another. A gradient from yellow to red will start yellow, run through successively less yellow, redder shades of orange, and eventually arrive at a full red. How gradual or abrupt the transition is depends on the amount of space the gradient has and the way you define color stops and progression color hints. If you run from white to black over 100 pixels, each pixel along the gradient’s default progression will be another 1% darker gray, as shown in Figure 9-1.

Figure 9-1. The progression of a simple gradient

As we go through the process of exploring gradients, always keep this in mind: gradients are images. It doesn’t matter that you describe them by typing CSS—they are every bit as much images as SVGs, PNGs, JPEGs, and so on—but gradients have excellent rendering performance, don’t require an extra HTTP request to load, and are infinitely scalable.

What’s interesting about gradients is that they have no intrinsic dimensions. If the background-size property’s value ...