# CSS radial gradient: shapes, sizes and positions

[Canonical HTML page](https://gradiently.design/guide/css-radial-gradient)

radial-gradient() draws colour outwards from a point. Here is every part of it, with live examples, plus the layering tricks behind soft glows, spotlights and vignettes.

## The short version

- A CSS radial gradient spreads colour outwards from a centre point, and is written with the radial-gradient() function anywhere CSS accepts an image.
- By default a radial gradient is an ellipse, centred in the box, sized to reach the farthest corner.
- The size keywords closest-side, closest-corner, farthest-side and farthest-corner decide where the last colour stop lands.
- The at keyword moves the centre, for example at 20% 30%, and positions work like background-position.
- Layering several radial gradients that fade to transparent is the standard way to build soft glows and mesh-like backgrounds in CSS.

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.

Amber glow, all defaults: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

An ellipse, centred, sized to the farthest corner. That is what you get when you only give colours.

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](https://gradiently.design/guide/css-mesh-gradient). For the design side of radial blends, see the companion guide to [radial gradients](https://gradiently.design/guide/radial-gradient).

## The radial-gradient() syntax

```css
/* 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)
```

Shape and size can come in either order. The position always follows the word at.

| Part | Values | Default |
| --- | --- | --- |
| Shape | `circle` or `ellipse` | `ellipse` |
| Size | a keyword, one length for a circle, or two lengths or percentages for an ellipse | `farthest-corner` |
| Position | `at` followed by anything `background-position` accepts | `at center` |
| Interpolation | `in oklab`, `in oklch` and other colour spaces | sRGB for hex colours |
| Colour stops | two or more colours with optional positions | required |

The parts of radial-gradient(). Only the colour stops are required.

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()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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.

- Ellipse: follows the box: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Circle: stays round: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

The same mint to forest stops. On a wide tile, the ellipse spreads sideways and the circle does not.

## 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%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

One sun, four sizes. closest-side ends at the nearest edge; farthest-corner, the default, reaches the corner furthest away.

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.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: horizon: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Moving the centre changes the mood more than changing the colours does.

## 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.

```css
.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%);
}
```

Three pools of violet, pink and sky blue on a near-black ground. Change a position and the whole composition shifts.

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`.

> **Soft glows band easily** Big, low-contrast radial fades on dark grounds are where stepping shows first. A faint noise layer on top hides it; see [CSS noise texture](https://gradiently.design/guide/css-noise-texture) and [gradient banding](https://gradiently.design/guide/gradient-banding).

## 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](https://gradiently.design/guide/css-patterns) guide has more.

- Navy rings: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Corner ripples: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Hard stops at fixed lengths turn a radial gradient into rings.

### Avoid

- Percentages for a circle's size, which are invalid
- Bright glows that end in a hard edge because the last stop is opaque
- Centring every glow at 50% 50%
- Five overlapping glows of equal strength

### Do

- Lengths for circles, percentages for ellipses
- Fade each glow to `transparent`
- Place glows off-centre, near corners or below the edge
- One dominant glow and one or two quieter ones

## FAQ

### How do I make a circle gradient in CSS?

Use `radial-gradient(circle, colour1, colour2)`. Adding `circle` keeps the shape round; without it you get an ellipse that stretches with the box.

### How do I move the centre of a radial gradient?

Add `at` and a position after the shape and size, for example `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Positions work like `background-position`.

### What does farthest-corner mean?

It sizes the gradient so its last colour stop reaches the corner of the box furthest from the centre. It is the default size.

### Can a circle radial gradient use a percentage size?

No. A circle needs a single length such as `200px`. Ellipses can use two percentages, such as `ellipse 60% 40%`.

### How do I make a glow effect with CSS gradients?

Layer one or more `radial-gradient()` values that fade from a semi-transparent colour to `transparent`, over a dark `background-color`.