How to Add a Blur Effect to a Background Image With CSS

To blur a background image while keeping its text sharp, put the image on a separate layer, such as a CSS pseudo-element, and apply filter: blur(...) to that layer. Do not apply the filter to the content container: CSS filters affect the selected element’s rendered contents too. For a localized frosted-glass panel, use backdrop-filter instead.

1. Blur a background layer and keep content sharp

This complete example uses a pseudo-element as the image layer. The section clips the layer to its bounds, while the negative inset lets the blurred image extend past the visible area and helps prevent transparent blur edges from showing.

<section class="hero">
  <div class="hero__content">
    <h1>A clear heading</h1>
    <p>This text stays sharp over the blurred image.</p>
    <a href="#details">Explore the details</a>
  </div>
</section>

* {
  box-sizing: border-box;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 24rem;
  padding: 6rem 2rem;
  color: white;
  background: #26364a; /* fallback while the image loads */
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px;
  background: url("background.jpg") center / cover no-repeat;
  filter: blur(8px);
}

.hero__content {
  max-width: 42rem;
  margin-inline: auto;
}

.hero__content a {
  color: inherit;
}

Replace background.jpg with an image URL available to your page. Adjust the blur radius and the negative inset together: stronger blur can require a larger extension. The right values depend on the image crop and the size of the visible area.

Why the pseudo-element works

The pseudo-element is a separate rendered layer, so its filter affects the background image rather than the heading, paragraph, and link. isolation: isolate creates a local stacking context that makes the negative z-index layer sit behind the content while remaining within the hero. The parent’s overflow: hidden clips the part of the extended layer outside the hero.

Applying filter: blur(8px) to .hero itself would blur the hero’s rendered contents as well. Keep text and controls outside the filtered image layer.

Add a dark overlay for text contrast

Blur softens image detail, but does not guarantee readable text. Add a gradient to the image layer when needed; its backgrounds are painted behind that layer’s contents:

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px;
  background:
    linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.35)),
    url("background.jpg") center / cover no-repeat;
  filter: blur(8px);
}

Choose the overlay strength based on the actual image and text. Avoid putting opacity on the whole hero or content wrapper if the foreground text should remain fully opaque.

2. Blur only the area behind a glass panel

Use backdrop-filter when the goal is to blur the pixels behind a panel rather than blur the entire background layer. The panel must have a transparent or partly transparent background so the filtered backdrop can show through.

<section class="photo">
  <div class="glass-panel">
    <h2>A frosted panel</h2>
    <p>The image behind this panel is blurred.</p>
  </div>
</section>

.photo {
  min-height: 24rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: url("background.jpg") center / cover no-repeat;
}

.glass-panel {
  max-width: 32rem;
  padding: 2rem;
  color: #17202a;
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

The -webkit-backdrop-filter declaration is a defensive compatibility measure for older WebKit implementations. MDN marks unprefixed backdrop-filter Baseline 2024 and notes that older devices or browsers may not support it; check the browsers your project needs to support. If unsupported, the translucent background still provides a panel, but without the blur effect.

Understand what the panel can blur

backdrop-filter applies effects to pixels painted behind the element, up to the nearest backdrop root. Ancestors with properties such as opacity below 1, a non-none filter, masks, or non-normal mix-blend-mode can create a backdrop root. This can limit which pixels a descendant panel sees, so inspect the ancestor chain if the blur covers an unexpected region.

3. Choose the right CSS technique

Technique	What gets blurred	Use it for	Watch for
`filter: blur(...)` on a pseudo-element or sibling	The image layer	A blurred hero or section background with sharp content	Keep foreground content outside the filtered layer; extend and clip the layer if edges show gaps.
`backdrop-filter: blur(...)` on a panel	Pixels behind the panel	A localized translucent or frosted-glass effect	The panel needs transparency; ancestor backdrop roots can bound the effect.

Use the first technique when the whole background should be blurred. Use the second when only the region behind a panel should be blurred.

4. Tune the result and handle edge cases

Set the image crop. background-size: cover fills the layer and may crop the image. Change background-position if the important subject is outside the visible crop.
Set a deliberate blur radius. Start with a modest value such as 8px for an area background or 10px for a panel, then adjust for the image and design. These are starting values, not universal requirements.
Check all edges. If the blur reveals a gap, increase the pseudo-element’s negative inset and confirm the parent clips overflow. The extension amount depends on the blur radius and crop.
Check text contrast. Try the page with the actual image, text, and viewport sizes. Add an overlay or a solid/ translucent text panel if needed.
Check stacking and interaction. Keep the content in a positioned or otherwise correctly stacked layer above the pseudo-element. Ensure the image layer does not cover links or controls.
Check browser support. In particular, verify backdrop-filter on the browsers and devices your site supports; do not assume older clients implement it.

5. Troubleshooting

Symptom	Likely cause	Fix
The heading and image are both blurry	The filter is on the content container, so its rendered contents are filtered too.	Move the image to a pseudo-element or sibling and apply the filter only to that layer.
The glass panel looks clear, not frosted	The panel background is opaque, or the browser does not support the property.	Use a transparent or partly transparent background and check target-browser support.
The backdrop blur affects the wrong area	An ancestor backdrop root may bound the backdrop considered by the panel.	Inspect ancestor opacity, filters, masks, and blend modes; simplify or adjust the relevant ancestor styles.
Unblurred strips or gaps appear at the edges	The filtered layer does not extend far enough beyond the clipped area.	Increase the negative inset and check the image crop and parent’s overflow clipping.
Text is difficult to read over the image	Blur does not provide enough contrast for the chosen image.	Add a dark gradient between image and text, or place text on a partly opaque panel; check contrast at actual sizes.
Links or controls are hard to click	The image layer is stacked above the foreground content.	Check the stacking context and layer order; keep the foreground above the pseudo-element.

6. Performance, reliability, and review

Blur is a graphical effect on rendered pixels. Keep the filtered area limited to the background or panel that needs it, and check the composition on the devices and browsers you support. The available references do not establish a universal performance cost or a best blur radius, so measure in your own page if rendering smoothness matters.

For reliable presentation, provide a fallback background color, use an image URL your page can load, and preserve text contrast independently of the blur. Treat backdrop-filter as an enhancement where browser support is uncertain. Review both the filtered result and the fallback behavior in target browsers.

7. Or skip the browser setup

If you are documenting or checking the finished page, [ScreenshotNeo](https://screenshotneo.com) can capture a URL with one GET request. It is a website screenshot API and MCP server for developers, built by Yorker Media. The request can return PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server lets AI agents using Claude, Cursor, or another MCP client take screenshots. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

8. FAQ

Can I blur an image used in a CSS background declaration?

Yes. Put that background declaration on a separately filterable pseudo-element or sibling layer, then filter that layer.

Will CSS blur change the image file?

No. The CSS filter changes how the element is rendered; it does not edit the source image file.

Can I use both techniques on one page?

Yes. A page can use a blurred image layer for a hero and a separate backdrop-filter panel elsewhere, with each effect chosen for the area it should blur.