How to Create a Radial Gradient in CSS

Use CSS radial-gradient() as a background image to create a color transition that radiates from a center point. Start with background: radial-gradient(#e66465, #9198e5);. To control its geometry and center, write radial-gradient(circle at center, #fff 0%, #4b6cb7 65%, transparent 100%). The function creates an image value, so use it with background or background-image, not background-color.

1. Basic radial gradient

Put the gradient directly in a stylesheet. This complete example creates a visible card with a radial color transition:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Radial gradient</title>
  <style>
    .card {
      min-height: 240px;
      padding: 2rem;
      color: #16172a;
      background: radial-gradient(#e66465, #9198e5);
      border-radius: 1rem;
    }
  </style>
</head>
<body>
  <main class="card">A radial gradient background</main>
</body>
</html>

The browser fills the element’s background area with the gradient. The gradient has no intrinsic dimensions or preferred aspect ratio; its concrete size follows the element it is painted on.

2. Understand the syntax

The general form is:

radial-gradient([<shape> || <size>] [at <position>], <color-stop-list>)

The shape, size, and optional at position appear before the first comma. The color-stop list follows that comma. The core syntax is defined by the CSS Images Module Level 3 specification and summarized in the MDN radial-gradient() reference.

For example, this makes an ellipse centered toward the top-left of its box:

.hero {
  background-image: radial-gradient(
    ellipse farthest-corner at 30% 20%,
    white,
    royalblue 70%,
    transparent
  );
}

If you omit the controls, the defaults are an ellipse, the farthest-corner size, and a center position.

3. Choose shape, size, and position

Shape

Use circle when the gradient’s radius should be the same in every direction. Use ellipse for an axis-aligned oval. An ellipse is the default.

Size

Extent keywords determine where the ending shape reaches relative to the gradient box:

Value	Effect
`closest-side`	Ending shape reaches the nearest side.
`farthest-side`	Ending shape reaches the farthest side.
`closest-corner`	Ending shape reaches the nearest corner.
`farthest-corner`	Ending shape reaches the farthest corner; this is the default.

You can also give explicit lengths, such as circle 12rem. This example creates a circle with a 12rem radius:

.glow {
  background: radial-gradient(circle 12rem at 50% 50%, #7c4dff, transparent);
}

Position

The position sets the gradient center using familiar CSS position values. If omitted, it is centered. Percentages are relative to the gradient box:

.spotlight {
  background: radial-gradient(ellipse at 25% 30%, #fff, #6aa7ff 38%, transparent 72%);
}

.top-right-glow {
  background: radial-gradient(circle at top right, #ffe3a3, transparent 18rem);
}

Move the center toward the subject or area you want to highlight. With an off-center gradient, part of its ending shape may fall outside the element, so the visible pattern can look different from a centered one.

4. Tune color stops and transitions

A color stop contains a color and can include a position. Stop percentages run along a virtual ray from the gradient center toward the ending shape: 0% is the center and 100% is where that ray meets the ending shape. If you leave positions out, CSS distributes them according to the gradient rules.

Use more stops to control where colors blend and where the gradient becomes transparent:

.soft-spotlight {
  background: radial-gradient(
    ellipse at 30% 20%,
    #fff8 0%,
    #77aaff66 35%,
    transparent 70%
  );
}

For a hard edge, put two stops at the same position. This badge transitions sharply from gold to orange at 58%, then to transparent at 60%:

.badge {
  background: radial-gradient(
    circle,
    #ffcf33 0 58%,
    #d85624 58% 60%,
    transparent 60%
  );
}

These color and position values are starting points, not universal design recommendations. Check contrast against any text or controls placed over a gradient.

5. Use radial gradients in common layouts

Layer a glow over a solid background

Multiple background images are painted in layers. Put the glow first and the solid color after it:

.panel {
  background:
    radial-gradient(circle at 15% 10%, #7c4dff66, transparent 18rem),
    #101426;
}

Make repeated concentric rings

A normal gradient transitions once across its shape. To repeat the color pattern outward, use repeating-radial-gradient():

.rings {
  background: repeating-radial-gradient(
    circle,
    #263238 0 8px,
    #80cbc4 8px 16px
  );
}

Repeated patterns can create visible banding. Adjust stop intervals and colors to suit the element’s size.

Use transparency over an image

Transparent stops let the background beneath show through:

.photo-card {
  background-image:
    radial-gradient(circle at 75% 20%, #0000 0 4rem, #0009 14rem),
    url("photo.jpg");
  background-size: cover;
  background-position: center;
}

The first listed background layer is on top. The gradient’s transparent regions reveal the image layer beneath it.

6. Inspect a gradient on the rendered page

Gradients are CSS, so there is no image asset to download or generate. To inspect a design at a particular viewport, use your browser’s developer tools to edit the declaration and resize the element. If you need a saved image of the rendered result for a design review, you can capture the page with a screenshot tool.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF; see the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn more at ScreenshotNeo.

7. Browser support and compatibility

The basic radial-gradient() function is widely available across browsers; MDN reports availability since July 2015. Some newer color interpolation syntax may vary in support, so check the specific syntax you plan to use against the MDN browser compatibility data. The core shape, size, position, and stop syntax is covered by the W3C CSS Images Module Level 3 specification.

8. Troubleshooting

Symptom	Likely cause	Fix
The gradient does not appear.	It was assigned to `background-color`, or another declaration overrides it.	Use `background` or `background-image`, and inspect the computed styles for overrides.
The gradient seems invisible.	The element has no visible area, the stops blend into the underlying color, or all visible stops are transparent.	Give the element a height or content, temporarily use contrasting opaque colors, and check the stop positions.
The shape is oval when a circle was expected.	The default shape is an ellipse.	Specify `circle` before the first comma.
The glow reaches too far or ends too soon.	The default extent is `farthest-corner`, or the chosen size does not match the box.	Set an extent keyword or explicit length and inspect at the target element dimensions.
The center is in the wrong place.	The default position is centered, or the position values are relative to a different box size than expected.	Set `at x y`, then resize the element to check responsive behavior.
There is an unexpected sharp boundary.	Two stops share a position or positions are tightly spaced.	Separate the stops to make a blend, or keep equal positions intentionally for a hard edge.
The colors or transparency look wrong over a photo.	Background layers are ordered unexpectedly or a stop is not transparent.	Remember the first background layer is on top; use a transparent color at the desired stop.
A newer color syntax fails in one browser.	Support differs for newer interpolation features.	Use a compatible color syntax or verify support for that specific feature.

9. Performance, reliability, and cost

A CSS gradient is described in the stylesheet, so it does not require a separate gradient image file or network request. Its rendered appearance depends on the element’s box, background layers, and stop values. If a page has many large, layered effects, inspect its actual rendering on the devices and browsers you support; this guide makes no benchmark claim.

For reliability, keep the key visual legible when the gradient is subtle or unavailable and avoid relying on color alone to communicate meaning. The basic function is widely supported, but validate newer syntax independently. CSS gradients have no per-capture cost. If you use ScreenshotNeo to capture rendered pages, only clean shots are billed; consult its documentation for request configuration and billing headers.

10. FAQ

Can I use a radial gradient on text?

The function is an image value, so it is not assigned as a text color directly. It can be used as a background, with additional CSS techniques to clip that background to text if needed.

Can a radial gradient have more than two colors?

Yes. Add as many color stops as the design needs, with optional positions to control their transitions.

When should I use a radial gradient instead of a linear gradient?

Use a radial gradient when the color should spread from a center outward. Use a linear gradient when it should progress along a straight direction.

How do I make the radial pattern repeat?

Use repeating-radial-gradient() and define the stop interval for each repeated band.