CSS radial-gradient() Function
The CSS radial-gradient() function creates a radial gradient.
A radial gradient defines a color transition that goes goes out from a central point.
A radial gradient requires at least two color stops. Color stops are the colors you want to render smooth transitions among.
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)
The following example shows a radial gradient with evenly spaced color stops:
Example
#grad {
background-image: radial-gradient(red, yellow, green);
}Live preview
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
Example
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}Live preview
Radial Gradient - Set Shape
The shape parameter defines the shape of the gradient. It can take one of the following values:
- ellipse (this is default)
- circle
The following example shows a radial gradient with the shape of a circle:
Example
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}Live preview
Radial Gradient - The size Parameter
The size parameter defines the size of the gradient'ending shape. It can take one of the following values:
- closest-side
- farthest-side
- closest-corner
- farthest-corner (this is default)
Example
#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black);
}Live preview
CSS repeating-radial-gradient() Function
The CSS repeating-radial-gradient() function is used to repeat radial gradients:
Example
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}Live preview