CSS | radial-gradient() Function
The radial-gradient() function is an inbuilt function in CSS which is used to set a radial gradient as the background image. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fade to the end color towards the edge of the element. Fade happens at an equal rate until specified.
background-image: radial-gradient( shape size at position, start-color, ..., last-color );
Parameters: This function accepts many parameters which are listed below:
- shape: This parameter is used to define the shape of gradient. It has two possible value circle or ellipse. The default shape value is ellipse.
- size: This parameter is used to define the size of gradient. The possible value are: farthest-corner (default), closest-side, closest-corner, farthest-side.
- position: This parameter is used to define the position of gradient. The default value is center.
- start-color, …, last-color: This parameter is used to hold the color value followed by its optional stop position.
Below example illustrates the radial-gradient() function in CSS:
- Google Chrome
- Internet Explorer
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.