CSS radial-gradient() Function

Example

div {
  background: radial-gradient(red, green);
}

Meaning

The radial-gradient() css function creates an image consisting of a progressive transition between two or more colors that radiate from an origin.

Its shape may be a circle or an ellipse.

Uses of CSS Radial Gradients

Radial gradients are similar to linear gradients, except that they radiate out from a central point.
You can dictate where that central point is.
You can also make them circular or elliptical.

Version: CSS3

Standard Syntax

radial-gradient(shape size at position, start-color, ..., last-color)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

Argument	Description
shape	Defines the shape of the gradient. Possible values: ellipse (default) circle
size	Defines the size of the gradient. Possible values: farthest-corner (default): The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. closest-side: The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner: The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. farthest-side: The ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
position	Defines the position of the gradient. Default value is center
start-color, ..., last-color	Defining how the gradient progresses between adjacent color stops. A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.

More Examples

Positioning Radial Color Stops

You can position each radial color stop with a percentage or absolute length.

Example

div {
  height: 250px;
  background-image: radial-gradient(red 10px, green 30%, blue 50%);
}

Positioning the Center of the Gradient

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present.

Otherwise in the order of position from the left and position from the top.

Example

div {
  height: 250px;
  background-image: radial-gradient(at 0%, red 10px, green 30%, blue 50%);
}

Setting Shape of the Gradient

The shape parameter defines the shape.

Value can be circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

Example

div {
  height: 250px;
  background-image: radial-gradient(circle, red, green, blue);
}

Sizing Radial Gradients

You can specify the size of radial gradients.

Possible values:

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

By default value is farthest-corner.

Circles can also be sized with a length, and ellipses a length or percentage.

closest-corner:

closest-side:

farthest-corner:

farthest-side:

Example

div {
  height: 200px;
  width: 200px;
}

.example1 {
  background-image:radial-gradient(closest-corner at 25% 75%, red, green 10%, blue 50%);

}

.example2 {
  background-image:radial-gradient(closest-side at 25% 75%, red, green 10%, blue 50%);

}

.example3 {
  background-image:radial-gradient(farthest-corner at 25% 75%, red, green 10%, blue 50%);
}

.example4 {
  background-image:radial-gradient(farthest-side at 25% 75%, red, green 10%, blue 50%);
}

❮ Previous Functions Next ❯