CSS radial gradient

The radial gradient extends from the center point of the gradient to all sides in the form of a circle or ellipse (the default shape), showing a smooth transition from one color shade to another. The radial gradient is created using the radial-gradient() function. The function creates an image, which is a radial gradient between the specified shades of colors. By default, the size of the gradient corresponds to the size of the element to which it is applied.

The radial-gradient() function takes the following arguments, separated by a comma:

The first argument specifies the keywords and/or CSS units that define the final shape, size and initial location of the gradient. Optional argument.
A comma-separated list consisting of two or more colors, each of which can be followed by a stop position.

The simplest radial gradient requires only two arguments that define the starting and ending color:

div {
  background-image: radial-gradient(cyan, indigo);
  width: 400px;
  height: 100px;
}

Try it »

As with linear gradients, a radial gradient can include a list of more than two colors, and you can specify a stop position for any color:

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(cyan, yellow, indigo, white); }
#two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); }

Try it »

The form of the radial gradient can be determined using the keywords circle and ellipse, specifying one of them as the first argument:

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(ellipse, cyan, indigo); }
#two { background-image: radial-gradient(circle, cyan, indigo); }

Try it »

By default, the browser has the center point of the radial gradient in the centre of the element. The center of the gradient can be positioned using the at keyword, followed by keywords (top, left, right, bottom, center) or values in the specified CSS units:

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If you specify only one keyword, the second will be center.
x% y%	The first value is the horizontal position, the second value is vertical. The top left corner is the position 0% 0%. The bottom right corner is 100% 100% position. If you specify only one value, the other value is 50%.
x-pos y-pos	The first value is the horizontal position, the second is the vertical position. The top left corner is the position 0 0. The units can be pixels (0px 0px) or any other CSS unit of measurement. If you specify only one value, the other value is 50%. You can combine % and units of measure.

The gradient positioning is indicated to the values of the color shades, but after the keyword defining the shape of the gradient (if it is specified):

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(at right, cyan, indigo); }
#two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); }
#three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); }

Try it »

The size of the gradient (how large the final shape of the gradient should be) can be determined using one of four keyword combinations or specifying the radius using CSS units (you can not use percentages to determine the radius).

Keywords	Description
closest-side	The final size of the gradient depends on the distance between the center of the gradient and the nearest side of the element (for the circle) or the distance between the center and the two sides of the element closest to it (for the ellipse).
closest-corner	The final size of the gradient depends on the distance between the center of the gradient and the nearest angle of the element.
farthest-side	The final size of the gradient depends on the distance between the center of the gradient and the furthest side of the element (for the circle) or the distance between the center of the gradient and the two sides furthest from it (for the ellipse).
farthest-corner	The final size of the gradient depends on the distance between the center of the gradient and the furthest from it angle of the element. Used by default for the shape of a circle or ellipse.

The keywords that determine the size of the gradient or the radius are specified before or after the keyword that defines the form, and necessarily before determining the position.

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); }
#two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); }
#three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); }
#four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan,
                                          #90EE90, rgba(172,160,160,0)); }

Try it »