CSS Radial Gradients

CSS Radial Gradients

The CSS radial-gradient() function creates a color transition that radiates outward from a central point.

Radial gradients can be circular or elliptical, positioned anywhere within an element, and sized in several ways. Like linear gradients, they can contain multiple colors, positioned color stops, hard transitions, and transparent colors.

Basic radial-gradient()

A basic radial gradient requires at least two colors.

.box {
  background-image: radial-gradient(lightblue, steelblue);
}

By default, the gradient begins at the center of the element and extends outward. The browser determines the gradient's shape and size from the dimensions of the element.

The first color appears at the center and transitions toward the final color around the outside of the gradient.

Gradient Shape

A radial gradient can use an ellipse or circle. The default shape is ellipse.

.box {
  background-image: radial-gradient(ellipse, lightblue, steelblue);
}

An elliptical gradient can stretch to match a rectangular area. To create a circular gradient, specify circle.

.box {
  background-image: radial-gradient(circle, lightblue, steelblue);
}

A circular gradient maintains a circular shape regardless of the element's proportions.

Gradient Position

The center of a radial gradient can be positioned using the at keyword followed by a position.

.box {
  background-image: radial-gradient(circle at top left, lightblue, steelblue);
}

Instead of beginning in the center, this gradient begins at the upper-left corner and radiates outward.

Positions can use keywords, percentages, lengths, or combinations of supported position values.

.box {
  background-image: radial-gradient(circle at 30% 40%, lightblue, steelblue);
}

Gradient Size

Radial gradients provide size keywords that determine how far the gradient extends from its center.

The default size is farthest-corner.

.box {
  background-image: radial-gradient(
    circle closest-side,
    lightblue,
    steelblue
  );
}

The gradient can also use explicit sizes. A circle accepts a radius, while an ellipse can use separate horizontal and vertical radii.

.box {
  background-image: radial-gradient(
    ellipse 200px 100px,
    lightblue,
    steelblue
  );
}

Multiple Colors

A radial gradient can contain more than two colors.

.box {
  background-image: radial-gradient(
    white,
    lightblue,
    steelblue
  );
}

When positions are not specified, the browser distributes the color stops along the gradient.

Color Stop Positions

Color stop positions control where colors appear as the gradient extends outward.

.box {
  background-image: radial-gradient(
    circle,
    white 0%,
    lightblue 40%,
    steelblue 100%
  );
}

The center begins with white, reaches lightblue at 40%, and transitions to steelblue at the outside of the gradient.

Changing these positions changes how much space is used for each transition.

Hard Color Stops

Radial gradients can create sharp rings by placing adjacent colors at the same position.

.box {
  background-image: radial-gradient(
    circle,
    lightblue 0% 40%,
    steelblue 40% 70%,
    navy 70% 100%
  );
}

Instead of gradually blending between the colors, this example creates three solid circular areas with sharp boundaries at 40% and 70%.

This technique is useful for creating rings, targets, dots, and other geometric background effects.

Transparent Gradients

Alpha transparency can be used in radial gradient color stops to reveal backgrounds underneath the gradient.

.box {
  background-image: radial-gradient(
    circle,
    rgb(0 136 204) 0%,
    rgb(0 136 204 / 0%) 70%
  );
}

The gradient begins with an opaque color in the center and gradually becomes transparent as it extends outward.

When transparency is difficult to see against a solid page background, placing the gradient over a checkerboard makes the changing alpha level easier to recognize.

Radial Gradient Example

The following example compares a normal radial gradient, hard color stops, and a transparent radial gradient. Open the example in the editor and change the colors, stop positions, shape, or center position to see how each type behaves.

.normal {
  background-image: radial-gradient(circle, lightblue, steelblue);
}
.hard-stops {
  background-image: radial-gradient(
    circle,
    lightblue 0% 40%,
    steelblue 40% 70%,
    navy 70% 100%
  );
}
.transparent {
  background-image: radial-gradient(
    circle,
    rgb(0 136 204) 0%,
    rgb(0 136 204 / 0%) 70%
  );
}