CSS radial gradient: shapes, sizes and positions

A CSS radial gradient blends colour outwards from a point, like light spreading from a lamp. You write it with radial-gradient() and use it wherever CSS takes an image, usually background-image. With no options it draws an ellipse in the middle of the box that reaches the farthest corner: radial-gradient(#fef3c7, #b45309) gives a pale centre glowing out to deep amber.

Everything else in the function changes one of three things: the shape, the size and the position. Once you can control those, the same function draws glows, spotlights, vignettes, sunbursts and the colour pools behind a mesh gradient in CSS. For the design side of radial blends, see the companion guide to radial gradients.

The radial-gradient() syntax

/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)

One rule catches people out: a circle's size must be a length such as 200px, never a percentage, because a percentage of a rectangle has no single radius. Ellipses accept percentages, as in ellipse 60% 40%. The MDN reference for radial-gradient() lists the full grammar.

Circle versus ellipse

An ellipse stretches with the box, so on a wide banner the glow is wide and on a tall story it is tall. A circle stays round whatever the box does. Use ellipses for backgrounds that should fill their container evenly, and circles for anything that should read as a light source, a planet or a button's glow.

Size keywords: closest-side to farthest-corner

The size decides where the final colour stop lands, which is where the gradient's ending shape sits. The four keywords measure from the centre to the nearest or farthest side or corner of the box. They only look different when the centre is off-centre, so the examples below all start at 30% 40%.

In practice, closest-side suits contained shapes such as dots and badges, because the colour never runs off the nearest edge. farthest-corner suits backgrounds, because the blend covers the whole box. When you need exact control, give a length: circle 180px at 50% 0 is a 180 pixel glow hanging from the top edge.

Positioning with at

The at keyword places the centre using the same values as background-position: keywords like at top right, percentages like at 20% 80%, or lengths like at 40px 60px. The centre can even sit outside the box, as in at 50% 120%, which gives a horizon glow rising from below the bottom edge.

Layered radial glows

The most useful radial pattern is several gradients stacked in one background-image, each fading to transparent, over a flat dark colour. Each layer is a pool of light in its own place. Because the first layer is painted on top, put the brightest, smallest glow first.

.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}

Two more patterns cover most remaining jobs. A vignette darkens the edges: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) layered over a photo. A spotlight follows the pointer when you feed its position from custom properties, such as radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), with a few lines of JavaScript setting --x and --y on pointermove.

Repeating radial gradients

repeating-radial-gradient() repeats its stops outwards until the box is full, so a pair of hard stops becomes rings. Use lengths for the stop positions so the ring width stays constant. It is the basis of ripple, target and halftone-like textures, and the CSS patterns guide has more.