Beginning CSS3 pp 427-443 | Cite as

Creating Gradients Without Images

  • David Powers


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.


Linear Gradient Polar Coordinate System Radial Gradient Gradient Line Solid Color 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.


Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.

Copyright information

© David Powers 2012

Authors and Affiliations

  • David Powers

There are no affiliations available

Personalised recommendations