What is a CSS radial gradient?

A CSS radial gradient radiates color outward from a central point, creating circular or elliptical color transitions. Defined with the radial-gradient() function, you can control the shape (circle or ellipse), size, center position, and color stops. Radial gradients are perfect for spotlight effects, glowing elements, and organic-looking backgrounds.

Common use cases

Radial gradients are commonly used for spotlight and glow effects behind hero content, circular button highlights, vignette overlays on images, and decorative background orbs in modern web design. They also work well for simulating light sources, creating depth perception, and building abstract background patterns when layered.

/* CSS — radial gradient examples */

/* Default ellipse */
.glow { background: radial-gradient(#3b82f6, #1e3a5f); }

/* Circle from center */
.spotlight {
  background: radial-gradient(circle, #fff 0%, transparent 70%);
}

/* Off-center position */
.orb {
  background: radial-gradient(circle at 30% 40%, #6366f1, #1e1b4b);
}

/* Sized circle */
.badge {
  background: radial-gradient(circle closest-side, #22c55e, transparent);
}