Radial-gradient() CSS function

It defines a CSS in-built function, which produces a smooth transition among multiple colors. It is used to set any radial-gradient that is same as a background-image. This function can be the elliptical or circular shape.

It can save the usages of bandwidth and also helps to decrease the time of download. The color appears from an individual point; expand outwards in the radial-gradient. The radial-gradient can be depicted via its ending shape and center point and multiple stop.


Following are some arguments:

position: This argument depicts a gradient position. ‘Center’ is its default value. It is described in units (like em, px, etc.) or keywords (such as left, bottom, etc.).

shape: It can portray the gradient’s shape, which can be elliptical or circular. When its value isn’t described, then it can set to the default value that is an ellipse.

size: It represents the size of a gradient. It has some possible values which are listed below:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

It has a default value, i.e., farthest-corner.

start-color, …., last-color: This argument holds the color value pursued by a stop position (optional).

Let’s understand the CSS function radial-gradient with the use of some examples.



Radial-gradient() CSS function

Consider the below examples:


In the following illustration, we will set the radial-gradient’s shape.


Radial-gradient() CSS function


In the following illustration, we will set the radial-gradient’s size.


Radial-gradient() CSS function

Pin It on Pinterest

Share This