CSS Radial Gradients

CSS Radial Gradients A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

Output :

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

Output :

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse. The following example shows a radial gradient with the shape of a circle:

Output 3:

Use of Different Size Keywords

The size parameter defines the size of the radial gradient. It can take the following four values:

closest-side – The gradient extends from the center to the closest side of the box.
farthest-side – The gradient extends from the center to the farthest side of the box.
closest-corner – The gradient extends from the center to the closest corner of the box.
farthest-corner – The gradient extends from the center to the farthest corner of the box.

Output :

Repeating a radial-gradient

The repeating-radial-gradient() function is used to create and repeat radial gradients. This is useful when you want a pattern that repeats outward from the center in a circular or elliptical shape.