The CSS radial-gradient is used to draw a background image that represents smooth transitions between colors in in a circular or elliptical shape.

Syntax:

background-image: radial-gradient(shape size at position, color-1 [stop-position-1], color-2 [stop-positon-2],...);

• The shape can be omitted, the default value is ellipse.
• The size can be omitted, the default value is farthest-corner.
• The position can be omitted, the default value is center.

The possible values of the shapes:

• circle
• ellipse

The values of the size can be:

• a length
• a percentage
• keyword (closest-side, closest-corner, farthest-side, farthest-corner)

The values of the position can be:

• length
• percentage
• keyword (left, center, right, top, bottom)

radial-gradient: ellipse (default)

See the Pen radial-gradient by majadc (@majadc) on CodePen.

radial-gradient: circle

See the Pen Untitled by majadc (@majadc) on CodePen.

The size of the gradient’s ending shape

See the Pen radial-gradient: size by majadc (@majadc) on CodePen.

Radial gradient with color stops

See the Pen radail-gradient with color stops by majadc (@majadc) on CodePen.

Related

• Gradients
• Linear gradient

Resources

• MDN radial-gradient