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.
On this page
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.
What it looks like
Built from
What it looks like
Built from
What it looks like
Built from
What it looks like
Built from
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 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.
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.
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.
Size
Starting blur
Size
Starting blur
Size
Starting blur
Size
Starting blur
Size
Starting blur
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.
/* 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; }If you need a frosted panel over a blurred background rather than the background itself, that is backdrop-filter, covered in CSS backdrop filter.
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 explains why. And if two of your colours meet in grey, swap one for a neighbour, as described in muddy gradients.
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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile