HTML and CSS Reference
In-Depth Information
Figure 15-4.
Simple radial gradient
Like
linear-gradient()
, more than two color stops are allowed and they can
optionally be followed by a length or percentage value, indicating the stop position of the
color. An example is shown in Figure
15-5
.
radial-gradient(black 25%, white, black 75%);
Figure 15-5.
Radial gradient with set stop positions
The shape of the radial gradient can be either an
ellipse
or a
circle
. The default
shape is
ellipsis
, which allows the gradient to spread itself to match both the height and
width of the element, as shown in Figure
15-5
. The alternative
circle
value, illustrated in
Figure
15-6
, forces the gradient to be circular, regardless of the shape of the element.
radial-gradient(circle, black 25%, white, black 75%);
Figure 15-6.
Circular radial gradient
