CSS Radial Gradient — Syntax, Shape, Size & Position Guide

Updated: May 2026

The radial-gradient() function radiates colors outward from a central point. It is the go-to tool for spotlight effects, soft glows, vignettes, and circular color transitions. Its shape, size and position parameters give you precise control that linear gradients cannot match.

Open the CSS Gradient Generator →

Free · No upload · In your browser

Full syntax

background: radial-gradient(
  <shape> <size> at <position>,
  <color-stop>,
  <color-stop>
);

All three parts of the first argument are optional. The default is ellipse farthest-corner at center, which stretches an ellipse to reach the farthest corner of the element.

/* Minimal: ellipse from center */
background: radial-gradient(#667eea, #764ba2);

Shape: circle vs ellipse

circle

ellipse (default)

Ellipse is the default and scales its axes proportionally to the element's dimensions. Circle always produces a geometrically perfect circle regardless of the element's aspect ratio. Use circle for spotlight effects and avatars; use ellipse when you want the gradient to follow the element's shape.

Size keywords

farthest-corner (default) — gradient reaches the corner farthest from the center.
closest-corner — gradient reaches the nearest corner, making it small and concentrated.
farthest-side — gradient reaches the farthest edge (side) of the element.
closest-side — gradient reaches the nearest edge. Useful for off-center spotlight effects where you want the glow to end sharply.

/* Tight spotlight in the top-left corner */
background: radial-gradient(circle closest-side at 20% 20%, #fff, transparent);

You can also specify an explicit size as one or two lengths or percentages: radial-gradient(circle 80px at center, ...) or radial-gradient(ellipse 60% 40% at center, ...).

Position

The at keyword sets the center of the gradient. It accepts the same values as the background-position property:

radial-gradient(circle at top left, ...)    /* corner */
radial-gradient(circle at 80% 30%, ...)    /* percentage */
radial-gradient(ellipse at center, ...)    /* keyword */

at top left

at 80% 70%

Moving the center outside the element (e.g., at -10% 50%) is valid and useful — it lets you show only part of a gradient, creating a subtle edge glow or a diffuse light source off-screen.

Repeating radial gradients

repeating-radial-gradient() tiles the pattern outward from the center. Define the tile width through explicit stop positions:

background: repeating-radial-gradient(
  circle,
  #667eea 0px,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

This produces concentric rings — a target or bullseye pattern. Varying the stop spacing creates irregularly spaced ripple effects.

Practical use cases

Vignette overlay — transparent center to dark edges: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%).
Soft button glow — a subtle radial on a dark button to simulate a light source hitting a surface.
Card spotlight — a faint white radial centered on a dark card, following the mouse position via CSS custom properties.
Avatar halo — circle farthest-side centered on a round avatar to produce a uniform halo effect.

Frequently asked questions

What is the difference between circle and ellipse in radial-gradient?

Circle produces a geometrically perfect circle regardless of the element's size. Ellipse stretches to match the element's aspect ratio, so on a wide rectangle it will be a wide ellipse, and on a tall element a tall one. Use circle when you need perfect round symmetry.

How do I create a spotlight effect with radial-gradient?

Use a light color stop at the center fading to a dark or transparent edge: radial-gradient(circle at 50% 40%, rgba(255,255,255,.15) 0%, transparent 60%) layered over a dark background. Adjust the center position to move the light source.

Can I use pixel lengths instead of percentage for gradient size?

Yes. radial-gradient(circle 100px at center, ...) fixes the radius to exactly 100px regardless of the element's size. Two values define an ellipse's horizontal and vertical radii separately.