CSS - radial-gradient()

In CSS, the function radial-gradient() allows you to create radial gradients as background images for elements. Radial gradients are gradients that radiate out from a central point, with colors blending from that point outward in a circular or elliptical manner. They are often used to create visually appealing background effects or to mimic lighting and shading.

In order to create a basic radial gradient, you need minimum two colors, which are known as color stops. The outcome of this function is an object, a special kind of <image>, of the datatype <gradient>.

Overview

A radial-gradient has no intrinsic dimensions, which means an image with no preferred size or aspect ratio.
The shape of the image can be a circle or an ellipse.
The size will match the size of the element it is applied to.
The <gradient> datatype can be used only where <image>s are used.
The repeating-radial-gradient() function can not be used with <color> datatype and properties such as background-color.
In order to create a radial-gradient that repeats itself, you need to use the CSS function repeating-radial-gradient().

Possible Values

A radial gradient is defined by specifying the center of the gradient (at 0%) and the size and shape of the ending shape (at 100%). The function radial-gradient() can have following values as arguments:

1. <position>: Specifies the position of the gradient. When no value is specified, it defaults to <center>.

2. <ending-shape>: Value can be either circle (gradient as a circle with a constant radius) or ellipse (gradient as axis-aligned ellipse). When no value is specified, it defaults to ellipse.

3. <size>: Specifies the size of the gradient's ending shape.

When no value is specified, it defaults to <farthest-corner>.
The value can be specified explicitly or by a keyword.
When <ending-shape> is given as circle, the value can be passed explicitly as <length> value, which is the circle radius. Negative values are not permitted.
When <ending-shape> is given as ellipse, the value can be passed as <length-percentage> with two values, providing ellipse size; where first value is horizontal radius and second is vertical radius. Percentage values are relative to the dimension of gradient box. Negative values are not permitted.
When <ending-shape> is not specified, the shape of the gradient is determined by the size provided.
One <length> value specifies a circle. Two values in <length-percentage> specifies an ellipse.
Single <percentage> value in invalid.
The gradients circle and ellipse accept various keywords as their size, which are listed in the later section.

4. <linear-color-stop>: Consists of a color stop's <color> values, along with one or two optional values of stop positions.

The stop position value can be either <percentage> or a <length> value.
Value equal to 0% or 0, represents the center of the gradient.
Value equal to 100%, represents the intersection of the ending shape with the virtual gradient ray.

5. <color-hint>: Determines the gradient progression between adjacent color stops. When no value specified, midpoint of the color transition is the midpoint between two color stops.

Following table lists the keywords that the gradients circle and ellipse accept as their size:

Keyword	Description
closest-side	For circle: The ending shape of the gradient meets the sides of the box closest to its center. For ellipse: The ending shape of the gradient meets both the vertical and horizontal sides closest to the center.
closest-corner	The ending shape of the gradient meets exactly the closest corner of the box from its center.
farthest-side	For circle: The ending shape of the gradient meets the sides of the box farthest to its center. For ellipse: The ending shape of the gradient meets both the vertical and horizontal sides farthest to the center.
farthest-corner	The ending shape of the gradient meets exactly the farthest corner of the box from its center. It is the default value.

Syntax

<gradial-gradient()> = 
  gradial-gradient( [ <ending-shape> || to <size> ]? [ at <position> ]?, <color-stop-list> )

CSS radial-gradient() - Composition

The radial gradient is the progressive transition of two or more colors along an axis. It is represented by a center point, an ending shape, and two or more color-stop points. Color stops are placed on a virtual gradient ray that extends horizontally from the center towards the right.

CSS radial-gradient() - Basic Example

Let us see an example of a basic radial gradient:

<html>
<head>
<style>
   div {
      height: 150px;
      width: 150px;
   }

  .basic-radial-gradient {
     background-image: radial-gradient(red, yellow);
   } 
</style>
</head>
<body>
   <h1>Basic radial gradient</h1>
   <div class="basic-radial-gradient"></div>
</body>
</html>

CSS radial-gradient() - Color Stops Positioning

Using the percentage or absolute length values, the color stops in a radial gradient can be positioned. Let us see an example:

<html>
<head>
<style>
  div {
   height: 150px;
   width: 150px;
  }

  .position-radial-gradient {
     background-image: radial-gradient(red 35px, yellow 25%, green 55%);
   } 
</style>
</head>
<body>
   <h1>Position radial color stops</h1>
   <div class="position-radial-gradient"></div>
</body>
</html>

CSS radial-gradient() - Positioning of Center

The center of the radial gradient can be positioned either using the keyterms, percentage or absolute length values. If only one value, i.e., length or percentage, is given, then the same would be repeating; else the order of position from left and position from top will be repeated. Let us see an example:

<html>
<head>
<style>
  div {
   height: 150px;
   width: 150px;
  }

  .center-gradient {
      background-image:
         radial-gradient(
            at 0% 50%,
            lightgreen 30px,
            blue 60%,
            magenta 20%
   );
}
</style>
</head>
<body>
   <h1>Radial gradient center position</h1>
   <div class="center-gradient"></div>
</body>
</html>

For more examples of radial-gradient(), click here.