When creating a radial gradient, it’s essential to specify a minimum of two color stops.
| background-image: radial-gradient(shape size at position, start-color, …, last-color); |
By default, the shape is an ellipse, the size is determined by the farthest corner, and the position is centered.
Radial Gradient with Evenly Spaced Color Stops (default behavior)
Below is an example demonstrating a radial gradient with color stops evenly spaced:
Example
| #grad { background-image: radial-gradient(red, yellow, green); } |
Radial Gradient – Differently Spaced Color Stops
Below is an example illustrating a radial gradient with color stops that are spaced differently:
Example
| #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); } |
The shape parameter specifies the shape of the radial gradient, which can be set to either circle or ellipse, with the default being ellipse.
Below is an example demonstrating a radial gradient with a circular shape:
Example
| #grad { background-image: radial-gradient(circle, red, yellow, green); } |
The size parameter determines the extent of the gradient, offering four options:
Example
A radial gradient showcasing various size keywords.
| #grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); } #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); } |
The repeating-radial-gradient() function is employed to create repeating patterns of radial gradients.
Example
A radial gradient that repeats.
| #grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); } |
