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

Get Beginning CSS3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.