HTML and CSS Reference
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