CSS radial-gradient() Function

CSS radial-gradient() Function

The CSS radial-gradient() function creates a smooth transition between two or more colors that radiate outward from a central point.

Radial gradients can be circular or elliptical, with customizable size, position, color stops, and color interpolation. They are commonly used for backgrounds, decorative effects, and highlighting areas of a page without requiring image files.

Syntax

radial-gradient(color-stop1, color-stop2, ...)
radial-gradient(shape at position, color-stop1, color-stop2, ...)
radial-gradient(shape size at position, color-stop1, color-stop2, ...)
radial-gradient(in color-space, color-stop1, color-stop2, ...)

The function requires at least two color stops. The shape, size, position, and color interpolation method are optional.

For example:

background-image: radial-gradient(red, blue);
background-image: radial-gradient(circle, red, blue);
background-image: radial-gradient(ellipse at top, yellow, orange);
background-image: radial-gradient(circle closest-side at center, white, blue);
background-image: radial-gradient(in oklab, red, blue);

The radial-gradient() function produces a CSS <image> value rather than a <color> value.

It can be used with properties that accept images, including background-image and background.

Parameters

The radial-gradient() function accepts several optional settings followed by a required list of color stops.

For example:

radial-gradient(circle farthest-corner at 30% 40%, #ffffff, #0066cc)

This creates a circular gradient centered at 30% horizontally and 40% vertically, with its size determined by the farthest corner.

The gradient transitions from white at the center to blue at the ending boundary.

How It Works

A radial gradient begins at a center point and transitions between colors along an outward radial direction.

For example:

background-image: radial-gradient(white, blue);

The browser creates an elliptical gradient centered in the element.

White appears at the center, gradually blending into blue toward the outer edge.

The gradient's appearance depends on several factors:

• The selected shape, either circular or elliptical.
• The size of the gradient relative to its background area.
• The position of the gradient center.
• The number and placement of color stops.
• The color interpolation method.

By default, the gradient is elliptical, centered, and sized using farthest-corner.

Unlike a linear gradient, which transitions along a straight axis, a radial gradient transitions outward through concentric circles or ellipses.

Gradient Shapes

The radial-gradient() function supports two shapes: circle and ellipse.

Circular Gradient

A circular gradient uses equal horizontal and vertical radii.

background-image: radial-gradient(circle, white, blue);

The gradient remains circular even when the element is rectangular.

Elliptical Gradient

An elliptical gradient can use different horizontal and vertical radii.

background-image: radial-gradient(ellipse, white, blue);

The gradient can stretch horizontally or vertically according to the background area and selected size.

If no shape is specified, the browser uses ellipse.

For example:

background-image: radial-gradient(red, yellow);

This uses the default elliptical shape.

Size Keywords

Size keywords determine how far the gradient extends from its center.

For example:

background-image: radial-gradient(circle closest-side, white, blue);
background-image: radial-gradient(circle farthest-side, white, blue);
background-image: radial-gradient(circle closest-corner, white, blue);
background-image: radial-gradient(circle farthest-corner, white, blue);

Size keywords are especially useful when the gradient center is not positioned in the middle of the element.

Explicit sizes can also be used:

background-image: radial-gradient(circle 100px, white, blue);
background-image: radial-gradient(ellipse 150px 80px, white, blue);

A circle accepts a single radius length. An ellipse accepts two radii, which can be lengths or percentages.

Gradient Position

The at keyword sets the center of a radial gradient.

For example:

background-image: radial-gradient(circle at center, white, blue);
background-image: radial-gradient(circle at top left, white, blue);
background-image: radial-gradient(circle at bottom right, white, blue);
background-image: radial-gradient(circle at 30% 70%, white, blue);

The position can use keywords, percentages, lengths, or compatible combinations.

For example:

background-image: radial-gradient(circle at 100px 50px, white, blue);

This places the gradient center 100 pixels from the left and 50 pixels from the top of the gradient box.

Another example:

background-image: radial-gradient(circle at 75% 25%, white, blue);

This places the center three-quarters across the width and one-quarter down the height.

If the position is omitted, the center defaults to center.

Color Stops

Color stops define the colors used in the gradient and where each color appears.

At least two color stops are required.

For example:

background-image: radial-gradient(red, blue);

This transitions from red at the center to blue at the outer edge.

Additional colors can be included:

background-image: radial-gradient(red, yellow, green, blue);

When positions are omitted, the browser distributes intermediate stops automatically.

Explicit positions provide more control:

background-image: radial-gradient(red 0%, yellow 30%, blue 100%);

Red begins at the center, yellow appears at 30% of the gradient radius, and blue appears at 100%.

Two positions can also be assigned to a single color stop:

background-image: radial-gradient(red 0% 30%, blue 70% 100%);

This keeps red solid through 30%, blends toward blue between 30% and 70%, and keeps blue solid afterward.

Hard Color Transitions

Radial gradients normally blend smoothly between colors, but adjacent color stops can create sharp boundaries.

For example:

background-image: radial-gradient(
  circle,
  red 0% 30%,
  yellow 30% 60%,
  blue 60% 100%
);

This produces three distinct concentric color regions.

The transitions are sharp because adjacent colors meet at the same positions.

Hard transitions can be used for circular targets, badges, and decorative rings.

For example:

.target {
  background-image: radial-gradient(
    circle,
    #ffffff 0% 20%,
    #cc0000 20% 40%,
    #ffffff 40% 60%,
    #cc0000 60% 100%
  );
}

This creates alternating white and red rings.

For continuously repeated rings, the repeating-radial-gradient() function may be more appropriate.

Transparency

Radial gradients can use transparent and partially transparent colors.

For example:

background-image: radial-gradient(circle, rgb(0 102 204 / 80%), transparent);

This creates a blue center that gradually fades to transparency.

Another example:

.highlight {
  background-image: radial-gradient(
    circle at center,
    rgb(255 255 255 / 80%) 0%,
    rgb(255 255 255 / 0%) 70%
  );
}

This produces a soft white highlight that fades outward.

Transparent gradients are useful for overlays, spotlight effects, and layered backgrounds.

For example:

.panel {
  background-color: #003366;
  background-image: radial-gradient(circle at top left, rgb(255 255 255 / 40%), transparent 70%);
}

The underlying background color remains visible through the transparent areas.

Color Interpolation

Color interpolation determines how the browser calculates intermediate colors between color stops.

The in keyword can specify a color space.

For example:

background-image: radial-gradient(in srgb, red, blue);
background-image: radial-gradient(in oklab, red, blue);
background-image: radial-gradient(in oklch, red, blue);

Different color spaces can produce visibly different transitions between the same colors.

The srgb color space uses standard RGB interpolation.

The oklab and oklch color spaces provide alternative interpolation methods designed around perceptual color relationships.

For polar color spaces such as oklch, a hue interpolation method can also be specified:

background-image: radial-gradient(in oklch shorter hue, red, blue);
background-image: radial-gradient(in oklch longer hue, red, blue);

These keywords control the direction of hue interpolation.

Support for explicit color interpolation syntax may differ from support for basic radial gradients.

Multiple Gradients

Multiple radial gradients can be layered within the same background.

Separate each gradient with a comma.

For example:

.background {
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 60%), transparent 40%),
    radial-gradient(circle at 80% 70%, rgb(0 102 204 / 60%), transparent 50%);
  background-color: #003366;
}

The first gradient appears above the second because CSS background images are layered from first to last.

Transparent areas allow lower background layers to remain visible.

Radial and linear gradients can also be combined:

.background {
  background-image:
    radial-gradient(circle at center, rgb(255 255 255 / 50%), transparent 60%),
    linear-gradient(135deg, #0066cc, #003366);
}

This combines a central highlight with a diagonal color transition.

Layering gradients is useful for creating more complex backgrounds without external images.

radial-gradient() vs. linear-gradient()

The radial-gradient() and linear-gradient() functions both create smooth color transitions, but they use different directions.

For example:

background-image: radial-gradient(circle, red, blue);
background-image: linear-gradient(to right, red, blue);

The first gradient radiates from the center, while the second transitions from left to right.

Use radial-gradient() for center-based color effects and linear-gradient() for directional transitions.

Example

This example demonstrates four radial gradients with different shapes and color combinations.

HTML:

<div class="radial-demo">
  <div class="radial-demo-item">
    <div class="radial-demo-box radial-basic"></div>
    <p>Basic</p>
  </div>
  <div class="radial-demo-item">
    <div class="radial-demo-box radial-circle"></div>
    <p>Circle</p>
  </div>
  <div class="radial-demo-item">
    <div class="radial-demo-box radial-ellipse"></div>
    <p>Ellipse</p>
  </div>
  <div class="radial-demo-item">
    <div class="radial-demo-box radial-multicolor"></div>
    <p>Multiple Colors</p>
  </div>
</div>

CSS:

.radial-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.radial-demo-item {
  text-align: center;
}
.radial-demo-box {
  width: 180px;
  height: 130px;
}
.radial-demo-item p {
  margin: 10px 0 0;
}
.radial-basic {
  background-image: radial-gradient(#ffffff, #0066cc);
}
.radial-circle {
  background-image: radial-gradient(circle, #ffffff, #0066cc);
}
.radial-ellipse {
  background-image: radial-gradient(ellipse, #ffcc00, #cc3300);
}
.radial-multicolor {
  background-image: radial-gradient(circle, #ffffff 0%, #00a896 40%, #003366 100%);
}

Each example uses the same dimensions but produces a different appearance based on the selected shape and color stops.

The circular gradients retain equal radii, while the elliptical gradients can stretch to fit the rectangular background area.

Position Example

This example demonstrates how changing the gradient center affects the visible color transition.

HTML:

<div class="radial-position-demo">
  <div class="radial-position-item">
    <div class="radial-position-box radial-position-center"></div>
    <p>Center</p>
  </div>
  <div class="radial-position-item">
    <div class="radial-position-box radial-position-top"></div>
    <p>Top Left</p>
  </div>
  <div class="radial-position-item">
    <div class="radial-position-box radial-position-bottom"></div>
    <p>Bottom Right</p>
  </div>
</div>

CSS:

.radial-position-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.radial-position-item {
  text-align: center;
}
.radial-position-box {
  width: 180px;
  height: 130px;
}
.radial-position-item p {
  margin: 10px 0 0;
}
.radial-position-center {
  background-image: radial-gradient(circle at center, #ffffff, #0066cc);
}
.radial-position-top {
  background-image: radial-gradient(circle at top left, #ffffff, #0066cc);
}
.radial-position-bottom {
  background-image: radial-gradient(circle at bottom right, #ffffff, #0066cc);
}

All three gradients use the same colors and circular shape.

The only difference is the position of the gradient center.

Changing the center can create highlights, directional emphasis, and decorative lighting effects.

Common Uses

The radial-gradient() function is commonly used for decorative backgrounds and center-based color effects.

For example:

.spotlight {
  background-image: radial-gradient(circle at center, #ffffff, #0066cc);
}
.glow {
  background-image: radial-gradient(circle, rgb(0 102 204 / 70%), transparent 70%);
}
.rings {
  background-image: radial-gradient(circle, #ffffff 0% 25%, #0066cc 25% 50%, #ffffff 50% 75%, #0066cc 75%);
}

These effects are generated directly by CSS and do not require separate image files.

Limitations

The radial-gradient() function has several important rules and limitations.

• At least two color stops are required.
• The function produces an image value, not a color value.
• The default shape is ellipse.
• The default position is center.
• The default size is farthest-corner.
• Explicit circle radii require a length rather than a percentage.
• Gradient images have no intrinsic dimensions.
• Color stops must use valid CSS color values and compatible positions.
• Support for newer color interpolation methods may vary between browsers.
• Gradients used as background images do not provide accessible alternative text.

For example, this is valid:

background-image: radial-gradient(circle, red, blue);

The following is invalid because it provides only one color stop:

background-image: radial-gradient(red);

The following is invalid because a circle radius cannot be specified as a percentage:

background-image: radial-gradient(circle 50%, red, blue);

Use a length for an explicit circular radius or a size keyword such as closest-side.

Browser Support

The CSS radial-gradient() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

Basic radial gradients can be used without vendor prefixes in modern browsers.

For example:

.box {
  background-color: #0066cc;
  background-image: radial-gradient(circle, #ffffff, #0066cc);
}

The solid background color provides a fallback if the gradient image is unsupported or unavailable.

Advanced features, including explicit color-space interpolation, may have different compatibility requirements.

For current compatibility information, visit Can I Use? and search for CSS gradients or radial-gradient.

Specifications

The radial-gradient() function is defined in the CSS Images Module Level 3 .

Extended color interpolation syntax is covered by the CSS Images Module Level 4 .

Related CSS functions include linear-gradient(), conic-gradient(), and repeating-radial-gradient().