# Blurry gradients: soft focus colour that feels modern

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

Blurry gradients look like colour seen through frosted glass or an out of focus lens. They are calm, modern and easy to make badly. Here is the method, with the numbers.

## The short version

- A blurry gradient is made by placing a few soft shapes of colour on a ground and blurring them until no edges remain.
- Blurry gradients differ from aurora gradients: aurora is ribbons of light on a dark sky, while a blurry gradient is diffuse colour with no direction or structure.
- The blur radius should be large relative to the canvas, roughly 10 to 20 percent of its shorter side, or the shapes still read as blobs.
- Three to four colours that sit near each other on the colour wheel blur cleanly; opposite colours turn grey where they overlap.
- Smooth blurred colour bands easily, so a fine grain layer should go on top before export.

A **blurry gradient** is colour without edges: a few soft shapes on a ground, blurred until all that is left is light drifting from one hue into the next. It looks like a photograph taken through frosted glass, or a lens pulled out of focus on a lit city. That softness is why it suits wellness apps, music, skincare, calm tech and wallpapers. The method is simple: shapes first, then a lot of blur, then grain. The details below are the difference between dreamy and smudged.

## Blurry gradients versus aurora and mesh gradients

These three get mixed up because they all look soft. They come from different ideas, and choosing the right one changes the brief.

| Style | What it looks like | Built from |
| --- | --- | --- |
| Blurry gradient | Diffuse colour, no direction, like soft focus | Shapes on a ground, heavily blurred |
| [Aurora gradient](https://gradiently.design/guide/aurora-gradients) | Ribbons or curtains of light on a dark sky | Stretched streaks with a clear flow |
| [Mesh gradient](https://gradiently.design/guide/mesh-gradients) | Smooth colour fields joined on a grid | Colour points blended across a mesh |
| Linear gradient | A straight ramp from one colour to another | Stops along a line |

A blurry gradient has no structure to follow. If you can see a direction or a shape, it is something else.

## How to make a blurry gradient

1. **Choose a ground** A pale off white for airy, a deep ink for glowing. The ground fills every gap the shapes leave.
2. **Pick three or four neighbouring colours** Colours close on the wheel, such as pink, lilac and sky blue, blend into clean in betweens. Read [analogous colours](https://gradiently.design/guide/analogous-colors) for more combinations.
3. **Draw large, overlapping shapes** Three to five circles or ovals, each covering a quarter to half the canvas. Let some run off the edges.
4. **Blur hard** Apply a Gaussian blur of roughly 10 to 20 percent of the canvas's shorter side. On a 1080 pixel wide post, that is around 110 to 220 pixels.
5. **Add grain** A fine noise layer at 3 to 6 percent opacity hides banding and stops the result looking plasticky.
6. **Check at phone size** Shrink it. If any shape still has a visible edge, blur more or make the shape bigger.

## Blurry gradient colour recipes

Each swatch approximates the finished look in a single gradient, so you can copy it straight into CSS or use the colours as your shapes. Elliptical radial gradients with off centre positions get surprisingly close to a real blur.

- Morning haze: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Peach bloom: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Mint fog: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Night bokeh: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Club lights: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Linen blur: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Three pale and three dark. Pale blurs feel airy and editorial; dark blurs feel like lights seen out of focus at night.

Pick the family by what sits on top. Pale blurs carry dark type well and suit skincare, stationery, wellness and editorial covers. Dark blurs make light type glow and suit nightlife, music and late events. A neutral blur such as linen works as a quiet backdrop for product photos, where the colour should never compete with the object. For more soft palettes, see [dreamy gradients](https://gradiently.design/guide/dreamy-gradients).

## How much blur a blurry gradient needs

Most blurry gradients fail by not being blurry enough. A shape blurred by 30 pixels on a 1080 pixel canvas is still a shape with a soft edge, which reads as a blob. The look needs the blur to be large enough that you cannot tell where one shape ends.

| Canvas | Size | Starting blur |
| --- | --- | --- |
| Instagram post | 1080×1350 | 110 to 220 px |
| Story or phone wallpaper | 1080×1920 | 110 to 220 px |
| Website hero | 1920×1080 | 110 to 220 px |
| YouTube thumbnail | 1280×720 | 70 to 145 px |
| A4 poster at 300 dpi | 2480×3508 | 250 to 500 px |

Starting points at 10 to 20 percent of the shorter side. Larger shapes need less blur; smaller ones need more.

## A blurry gradient in CSS

On the web you have two routes. Layered radial gradients that fade to transparent are cheap and render instantly. Real blurred elements look softer and can drift, but cost more to draw. For a static background, layers are usually enough.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

Route 1 is a soft, static morning haze. Route 2 uses three blurred circles you can move slowly with transform.

If you need a frosted panel over a blurred background rather than the background itself, that is `backdrop-filter`, covered in [CSS backdrop filter](https://gradiently.design/guide/css-blur-background).

## Why blurry gradients look cheap, and the fix

### Smudged

- Shapes still visible as soft blobs
- Complementary colours that turn grey in the overlap
- Even, centred composition
- Perfectly smooth, with banding in the fades
- Words placed over the most saturated patch

### Dreamy

- Blur so wide no edge survives
- Neighbouring hues that blend into clean in betweens
- One dominant colour mass, off centre
- Fine grain over everything
- Words on the palest or deepest area

Banding is the one that catches everyone, because a blur creates long, gentle fades across many pixels. A little grain fixes it; [gradient banding](https://gradiently.design/guide/gradient-banding) explains why. And if two of your colours meet in grey, swap one for a neighbour, as described in [muddy gradients](https://gradiently.design/guide/muddy-gradients).

A vertical story with the words Breathe in on a soft, pale, blurry pink and lilac background

A Story at 1080×1920 for a meditation app. Soft colour, short words, nothing with an edge.

Gradiently's Marks include soft, diffuse materials with grain built in, and they keep the area behind your words calm, so a blurry look never swallows the headline. You can design with any unclaimed Mark for free in the Studio.

## FAQ

### How do I make a blurry gradient?

Place three to five large shapes in neighbouring colours on a plain ground, apply a heavy Gaussian blur of about 10 to 20 percent of the canvas's shorter side, then add a light grain layer.

### What is the difference between a blurry gradient and an aurora gradient?

An aurora gradient has ribbons of light with a clear flow, usually on a dark sky. A blurry gradient is diffuse colour with no direction or visible structure.

### Can I make a blurry gradient with CSS only?

Yes. Layer several radial gradients that fade to transparent, or blur absolutely positioned circles with `filter: blur()`.

### Why does my blurry gradient look banded?

Long, gentle fades have few distinct colour steps, so they show stripes. Add fine grain and export PNG rather than compressed JPEG.