HTML and CSS Reference
center ; or you can set the starting position explicitly using a percentage or one of the
CSS units of measure.
The default shape of a radial gradient is ellipse with the specific dimensions based
on the size of the containing object and the size of the gradient. For example, if the
object is taller than it is wide, the radial gradient will be as well, appearing in the form of
an elongated circle. You also can specify the gradient shape as circle , so that the gradi-
ent takes the shape of a perfect circle regardless of the object's dimensions.
By default, a radial gradient covers the entire object with the last color placed at the
corner farthest from the center of the gradient. You can set a different stopping point
using the following keywords:
• closest-side : Stop at the side closest to the gradient's center.
• closest-corner : Stop at the corner closest to the gradient's center.
• farthest-side : Stop at the side farthest from the gradient's center.
• farthest-corner : Stop at the corner farthest from the gradient's center.
• contain : Contain the gradient entirely within the object (synonymous
with closest-side ).
• cover : Cover the entire object with the gradient (synonymous with
You also can explicitly set the size of the radial gradient using pixels or percentages.
Figure 8-25 shows examples of different radial gradients created using the
Radial gradients from different starting positions and shapes
( left top , center , red,
( center , closest-side , red,
radial-gradient( right , red
30% , yellow 35% , blue 40% )
You can explore how to define your own radial gradients using the demo_radial_
gradients.htm page in the tutorial.08/demo folder.
Defining Gradients with Browser Extensions
The syntax of linear and radial gradients is not yet finalized at the time of this writing, and
support for gradients is uneven in the current browser market. To support the widest range of
browsers, you should use browser extensions in your style sheets. The linear-gradient()
and radial-gradient() functions were based on Mozilla's -moz-linear-gradient()
and -moz-radial-gradient() functions. Beginning in 2010, WebKit also began support-
ing the linear-gradient() and radial-gradient() functions as a browser extension,
preceded by the -webkit- prefix.
However, before 2010, installations of WebKit used the function
-webkit-gradient(linear, start , stop , from( color ), color-
stop( percent, color ), to( color ) )
to create linear gradients, where start provides the starting location of the gradient,
stop defines the gradient's stopping location, color is a color value or color name, and