Loading lesson path
Formula
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.
Formula
shape size at position, start - color, ..., last - color);Formula
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:
#grad {
background-image: radial-gradient(red, yellow, green);
}Formula
Radial Gradient - Differently Spaced Color StopsThe following example shows a radial gradient with differently spaced color stops:
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}Formula
Radial Gradient - Set ShapeThe 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:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}Formula
Radial Gradient - The size ParameterThe size parameter defines the size of the gradient'ending shape. It can take one of the following values:
Formula
closest - side farthest - side closest - corner farthest - corner(this is default)
A radial gradient with different size keywords:
#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);
}Formula
repeating - radial - gradient() function is used to repeat radial gradients:#grad {Formula
background - image:repeating-radial-gradient(red, yellow 10%, green 15%);
}