CSS radial-gradient() function
The radial-gradient() is an in-built CSS function which generates the smooth transitions between two or more than two colors. It sets the radial gradient as the background image. It can be a circular or elliptical shape.
It saves the bandwidth usages as well as helps to reduce the download time. In radial-gradient, the color emerges from a single point then spread outwards. A radial-gradient is defined by its center point and ending shape and two or more than two color stops.
Syntax
Let’s discuss its arguments.
position: It defines the gradient position. Its default value is center. It can be specified in units (such as px, em, etc.) or keywords (like bottom, left, etc.).
shape: It defines the shape of the gradient, which can either be circular or elliptical. If its value is not specified, then it sets to its default value, i.e., ellipse.
size: It defines the gradient size. Its possible values are:
- farthest-corner
- farthest-side
- closest-corner
- closest-side
Its default value is farthest-corner.
start-color, …., last-color : It holds the value of color followed by an optional stop position.
Let’s try to understand the radial-gradient() function by using some illustrations.
Example1
Example2
In this example, we are going to set the shape of radial-gradient.
Example3
In this example, we are going to set the size of radial gradient.