CSS Gradients – Radial Gradients

Radial gradients are drawn differently from linear gradients. If the linear colors are located perpendicular to the line that sets the direction, then the radial colors diverge from the specified center, and the gradient can take the form of a circle or ellipse.

For the simplest radial gradient it is enough to set only the colors, as can be seen in the example below:

background: radial-gradient(crimson, darkgreen);

In addition to colors, you can set the gradient shape, position, and size. Parameters are combined and behave more complex than in linear gradients.

The shape (the final gradient shape) can be a circle or an ellipse. By default, it is an ellipse. the gradient tends to take up all the free space of the element, stretching out if necessary.

In order for the gradient to have a circle shape, this must be set explicitly using the keyword circle.

.ellipse {background: radial-gradient(crimson 50%, darkgreen 70%)};
.circle {background: radial-gradient(circle, crimson 50%, darkgreen 70%);}

If the shape is not specified, but the size is specified, one value sets the radius of the circle; if there are two values, the gradient takes the form of an ellipse. If there are sizes, explicitly setting the gradient shape is ignored.

The position determines where the center of the gradient will be located . They use the same keywords as the linear gradient, but with the prefix at: at top, at right, aat bottom, at left and at center – the default value.

They can also be combined with each other to arrange the gradient on a given side, for example: at right top – in the upper right corner.

Below you can see how different positions work:

.top {background: radial-gradient(at top, crimson, darkgreen);}
.right {background: radial-gradient(at right, crimson, darkgreen);}
.bottom {background: radial-gradient(at bottom, crimson, darkgreen);}
.left {background: radial-gradient(at left, crimson, darkgreen);}
.center {background: radial-gradient(at center, crimson, darkgreen);}
.top-left {background: radial-gradient(at top left, crimson, darkgreen);}
.top-right {background: radial-gradient(at top right, crimson, darkgreen);}
.bottom-left {background: radial-gradient(at bottom left, crimson, darkgreen);}
.bottom-right {background: radial-gradient(at bottom right, crimson, darkgreen);}

You can also specify the exact position of the gradient, for example, at 20% 50% or at 10px 150px.

Size defines the size of the final gradient shape. For elliptical gradients, the values can be set as a percentage, but not for round gradients.

If one value is specified, it is considered the radius of the circular gradient. If two values ​​are specified, the first is considered the horizontal radius of the ellipse, the second is vertical.

Below are examples of round and elliptical gradients. The shape of the figure is determined by the given dimensions:

.ellipse {background: radial-gradient(7em 1.2em, crimson 93%, darkgreen 100%);}
.ellipse2 {background: radial-gradient(1em 6em at bottom, crimson 93%, darkgreen 100%);}
.circle {background: radial-gradient(3em, darkgreen 93%, crimson 100%);}
.circle2 {background: radial-gradient(7em at right, darkgreen 97%, crimson 100%);}

You can also use keywords for radial gradients:

closest-side – the gradient ends at the border of the element closest to the center of the gradient. If it is an ellipse, the gradient touches all the borders of the element.
farthest-side – the gradient ends at the far boundary of the element. If it is an ellipse, the gradient touches all the borders of the element.
closest-corner – the final figure is stretched so that it passes through the corner of the element closest to the center of the gradient. If the final shape is an ellipse, the gradient stretches over the entire shape. With this parameter, the gradient fills the whole figure, partially beyond its limits.
farthest-corner – similarly closest-corner, only the final figure passes through an angle farthest from the center of the gradient. The default value.

Some gradients have a position at bottom added to make the code action more visible:

.closest-side {background: radial-gradient(closest-side, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 100%);}
.farthest-side {background: radial-gradient(farthest-side at bottom, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.closest-corner {background: radial-gradient(closest-corner, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.farthest-corner {background: radial-gradient(farthest-corner at bottom, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.circle-closest-side {background: radial-gradient(circle closest-side, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.circle-farthest-side {background: radial-gradient(circle farthest-side at bottom, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.circle-closest-corner {background: radial-gradient(circle closest-corner at bottom, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}
.circle-farthest-corner {background: radial-gradient(circle farthest-corner at bottom, #1BF2DD 20%, #F2EA7E 20%, #F2EA7E 40%, #F2BA52 40%, #F2BA52 60%, #F2994B 60%,  #F2994B 80%, #F23E2E 80%, #F23E2E 99%, #F2EA7E 100%);}

Thanks for reading our blog, don’t forget to check out our CSS Gradient Generator to help further with learning about gradients. Also, have a look at our blog on linear gradients.