Radial gradient

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


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.



Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.