Radial Gradient in CSS
Radial Gradient
For creating a radial gradient, we must have at least two color stops. As we know, radial-gradient is described by its center. By default, the shape of the linear gradient is an eclipse.
What are Color Stops?
Colors stops are basically the colors among which you want to render smooth transitions. There is no limitation on color stops. We can add multiple color stops separated by a comma. We can set the direction of our linear gradient. The direction can be from left to right, top to bottom, bottom to top, right to left, and many more. We can also specify the angle of a linear gradient. By doing this, the linear gradient will start from that particular angle.
Syntax:-
Its syntax is:-
< style >
element{
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| shape | Defines the shape of the gradient. For example, circle, ellipse. |
| size | Defines the size of the gradient. For example, farthest-side, closest-side. |
| position | Defines the position of the gradient. The center is by default. |
| start-color, ..., last-color | Color stops are the colors that we want to render with smooth transitions. It consists of a color value, with an optional stop position. |
