The short version
- A blurred background removes detail so the subject or the text in front of it becomes the clear focus.
- Blur works best when it is either subtle, like a lens's shallow depth of field, or strong enough to turn the background into soft colour, and looks accidental in between.
- A heavily blurred photo becomes a gradient of its own colours, which is a quick way to make a background that matches an image.
- Blurred images often show banding and faded edges, which a little grain and a slight enlargement fix.
- A gradient built from the photo's colours, a dark scrim or a solid panel can do the same job as blur with more control.
On this page
A blurred background takes detail away so something else can lead: a face in a portrait, a product in a shop photo, a headline on a post, a panel in an interface. Blur works because the eye goes to whatever is sharpest. The skill is in the amount. A little blur looks like a lens; a lot turns the background into soft colour; the middle ground usually looks like a camera that missed focus.
When a blurred background helps
- Separating a subject. Portraits and product shots read more clearly when the background is soft, as with a lens at a wide aperture.
- Making room for words. Text over a blurred photo is easier to read than text over a sharp, detailed one.
- Filling a format. A landscape photo placed in a vertical story needs something above and below it; a blurred, enlarged copy of the same photo fills that space in matching colour.
- Layered interfaces. Frosted glass panels blur what is behind them, so the panel reads as a separate layer while hinting at the content beneath.
- Privacy on calls. Video call apps blur the room behind you so attention stays on your face.
Photo 1200×900 (4:3)
1200 × 900
Story 1080×1920
1080 × 1920
How much blur to use
| Strength | What it looks like | Use it for |
|---|---|---|
| Slight | Background recognisable, softly out of focus | Portraits, product shots, natural depth |
| Middle | Shapes smeared but still identifiable | Rarely: tends to look like a focus mistake |
| Strong | Shapes gone, only soft fields of colour | Behind text, format fills, ambient backgrounds |
Blur strength is relative to the image size: the same radius that barely softens a 4,000 pixel photo will dissolve a 600 pixel one. Judge by eye at the size people will see it. For text backgrounds, go strong enough that no edges remain behind the letters, because half-blurred shapes still compete with the words; text over images explains why.
A blurred photo is a gradient in disguise
Blur a photo heavily and what remains is its colour, spread into soft fields: a sunset becomes an orange to violet blend, a forest becomes deep greens with a pale sky at the top. That is why blurred photos make such natural backgrounds for the images they came from. It is also a hint: you could build that gradient directly and get the same harmony, sharper control and no compression artefacts.
To pull the palette from a photo, see colour palette from an image. In Gradiently, Match a picture does it in one step: drop an image and you get its palette and the closest Marks, or new ones made in its likeness.
Fixing the usual blur problems
- 1
Enlarge to hide faded edges
Blur pulls in transparency or dark pixels from outside the image, so edges turn pale or grey. Scale the blurred copy up slightly beyond the frame so its soft edges are cropped off.
- 2
Add grain to stop banding
A heavily blurred image is a set of slow, smooth fades, which band once saved as an 8-bit JPEG or PNG. A light grain layer hides the steps; see gradient banding.
- 3
Darken or lighten for text
Blur removes detail but not brightness. If text still struggles, lay a dark or light wash over the blur until contrast holds.
- 4
Keep the saturation lively
Blur averages colours together, which can dull them. A small saturation boost after blurring brings the colour back.
Blurred backgrounds in CSS
On the web there are two tools. filter: blur() blurs an element, which suits a blurred copy of an image behind the real one. backdrop-filter: blur() blurs whatever sits behind an element, which makes frosted glass panels. Both cost paint time, and backdrop-filter over scrolling content costs the most; see CSS gradient performance.
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cover::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--cover-image) center / cover;
filter: blur(40px) saturate(1.2);
transform: scale(1.15); /* crops the faded edges */
}
/* a frosted glass panel */
.panel {
background: rgb(255 255 255 / 0.12);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}--cover-image to the image's url() on the element. Scaling hides the pale edges blur creates.Frosted panels over colourful backgrounds are the basis of glassmorphism, which has its own rules for contrast and borders.
Alternatives to blur
Blur
- Keeps the photo's colours automatically
- Can band, fade at edges and dull colour
- Still varies in brightness behind text
- Costs paint time when live on the web
A designed gradient
- Uses the photo's palette, chosen on purpose
- Clean, with grain added where needed
- Calm, even area placed exactly behind text
- A few bytes of CSS, or a crisp export
A dark scrim, a solid panel behind the words, or a duotone treatment of the photo are the other common choices. Blur is the quickest; a designed background is usually the most controlled.
Questions people ask
When should I use a blurred background?
When something in front needs to lead: a subject in a photo, words on a post, a panel in an interface, or a photo placed inside a format it does not fill.
How much should I blur a background?
Either slightly, so it looks like natural depth of field, or strongly, so only soft colour remains. Medium blur tends to look like a focus mistake.
Why does my blurred background have grey edges?
Blur pulls in empty or dark pixels from outside the image. Enlarge the blurred layer slightly past the frame so those edges are cropped.
Why does my blurred background look stepped?
Smooth, slow fades band when saved in 8-bit formats. Add a faint grain layer before exporting.
How do I blur a background in CSS?
Use filter: blur() on a copy of the image behind the content, or backdrop-filter: blur() on a panel to blur whatever sits behind it.
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
