Use Radial Gradients in CSS: Shape, Center, and Size

Start with a center and an outward transition

A CSS radial gradient changes colors outward from an origin. Use it for a soft spotlight, a circular accent or an elliptical background. Unlike a linear gradient, it does not have one directional line running from one side of the element to the other.

Choose the shape, center and ending size together. The same color stops can look very different in a square badge and a wide banner because the gradient is painted into the element's background area. Start with a defined box, then resize that box before deciding the gradient is finished.

Create a soft highlight on a panel

<div class="radial-panel">
  <strong>Explore the next stop</strong>
</div>

.radial-panel {
  box-sizing: border-box;
  min-height: 14rem;
  padding: 2rem;
  color: #172554;
  background-color: #dbeafe;
  background-image: radial-gradient(
    ellipse farthest-corner at 25% 30%,
    #ffffff 0%,
    #bfdbfe 45%,
    #93c5fd 100%
  );
}

The center sits one quarter of the box width from the left and thirty percent of its height from the top. The first color starts there. The intermediate blue appears before the final blue at the ending shape. The text remains an ordinary foreground element over the background.

Compare a circle with an ellipse

A circle uses a circular ending shape, while an ellipse can stretch differently along the horizontal and vertical axes. On a wide panel, an ellipse may spread a highlight across more of the width without making the vertical transition equally large. Choose based on the visual purpose, not on which keyword looks shorter.

Try replacing ellipse farthest-corner with circle closest-side in the sample. The transition then reaches its ending circle at the nearest side from the selected center. Because the center is off-center, that radius can be relatively small, leaving much of the panel at the final color.

Size keywords refer to the gradient's box and origin. Moving the origin can therefore change the size as well as the apparent position of the highlight. When tuning the center, inspect the full background instead of watching only the brightest point.

Use stops to control the transition

Moving the middle stop from forty-five percent to twenty percent brings its blue closer to the origin. Moving it toward eighty percent keeps the earlier transition spread over more of the radius. Equal positions for two adjacent stops create a sharp color boundary instead of a smooth blend.

For a repeated ring pattern, use repeating-radial-gradient with deliberate stop distances. A normal radial-gradient does not automatically repeat simply because its last stop is less than the full box size. Keep the repeated pattern separate from this soft-highlight example so the intended effect remains clear.

Check the background with real content

A panel often becomes taller when its text wraps on a phone. That changes the background area and can move the colors behind the text. Test both a short label and the longest expected content, including zoomed text, rather than fixing a height that clips the words.

Review contrast at every place where text can appear. A light center with dark edges can put one line over several brightness levels. If the content position is unpredictable, place the text on a separate opaque surface or use a less variable gradient.

If the effect does not appear, inspect computed background-image and confirm that the element has a visible area. A later background shorthand may replace the gradient. Also check whether another layer is fully covering it, particularly when the gradient is combined with a photo.

The radial-gradient reference defines shape and sizing syntax. The gradient generator also offers a basic radial mode; use it for an initial pair of colors, then add the explicit center and size required by this example.

Related guides

Animate a Radial Gradient Radius with a Typed Property

Animate a CSS radial gradient radius using a registered length property, inspect intermediate values, and provide a static reduced-motion version of the effect.

Animate a Radial Gradient with a Pulsing Halo

Animate a radial-gradient halo on a separate layer, keep text stationary, add a keyboard pause control, and disable decorative motion when the user requests it.

Use CSS Gradients as Reusable Background Values

Add gradient color in CSS with image-valued custom properties, reuse a palette across components, and keep text colors separate from background gradients.