Gradients - CSS Quick Syntax Reference Guide - page 59

Two length values for the ellipsis or a single value for the circle can be used to set the
horizontal and vertical radius of the gradient. For the ellipsis, they can also be percentage
values that are relative to the dimensions of the element, as in the example shown in
Figure 15-7 .

radial-gradient(75% 25%, gray, black);

Figure 15-7. Resized radial gradient

If less precision is needed, the size can be set by using one of the predefined
keywords: closest-side , closest-corner , farthest-side , or farthest-corner . These
values specify whether the gradient is contained by the sides or corners of the element
nearest to or farthest away from the origin (see Figure 15-8 ). For example, the farthest-side
value sizes the gradient so that its last color ends at the farthest side of the element away
from its origin.

radial-gradient(farthest-side, gray, black);

closest-side

closest-corner

origin farthest-side

farthest-corner

Figure 15-8. Size keywords

The origin of a radial gradient is centered by default. It can be changed by specifying
the position of the gradient's origin with the keyword at followed by a position specified
in the same way as for the background-position property. The horizontal position is
specified first, optionally followed by the vertical position. The position can be set with