To blur a background image while keeping text sharp, put the image on a separate pseudo-element or sibling layer and apply filter: blur(...) to that layer. Put your content above it. Use backdrop-filter instead when you want a translucent panel to blur only the pixels visible behind that panel.
Blur the background image without blurring the text
A CSS filter affects the element it is applied to, including its rendered contents. Applying filter: blur(8px) to a section that contains a heading and paragraph will blur those too. Put the image on a separate layer so the foreground content remains unfiltered. See MDN’s filter reference and guide to using filter effects.
As an Amazon Associate I earn from qualifying purchases.
HTML
<section class="hero">
<div class="hero__content">
<h1>Readable heading</h1>
<p>This content stays sharp above the blurred image.</p>
</div>
</section>CSS
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 6rem 2rem;
color: white;
}
.hero::before {
content: "";
position: absolute;
z-index: -1;
inset: -12px;
background: url("background.jpg") center / cover no-repeat;
filter: blur(8px);
}The pseudo-element is the filtered image layer; the text remains in the section’s normal content layer. isolation: isolate establishes a local stacking context for the negative z-index, and overflow: hidden clips the enlarged, blurred image to the hero’s bounds. The negative inset extends the image beyond those bounds, reducing the chance that blur reveals unpainted edges. Adjust it for your blur radius and image crop; 12px is an example, not a universal value.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Add contrast without fading the text
If the image makes text difficult to read, add a dark overlay between the image and content. One option is a gradient on the pseudo-element itself:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.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);
}Because the overlay and image share the filtered layer, both are blurred. For a crisp overlay, use a second positioned layer above the image and below the content. Avoid setting opacity on the whole hero if the text must stay fully opaque.
When to use backdrop-filter instead
Use backdrop-filter when only a localized panel—such as a card or navigation bar—should blur the image behind it. Unlike filter, it affects the backdrop visible through the element rather than filtering the element’s own contents. The panel needs a transparent or partly transparent background for the blur to show.
.glass-panel {
background: rgb(255 255 255 / 0.18);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}The prefixed declaration is a defensive compatibility measure for older WebKit implementations, not a guarantee of support. MDN identifies unprefixed backdrop-filter as Baseline 2024—available across the latest browser and device versions since September 2024—and notes that older environments may lack support. Check the browsers your site must support. See MDN’s backdrop-filter reference.
Backdrop blur can also be bounded by an ancestor backdrop root. Ancestors with properties such as opacity below 1, a non-none filter, masks, or non-normal mix-blend-mode can create such a root. If the panel is not blurring the region you expect, inspect those ancestors.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Choose the right blur technique
| Technique | What it blurs | Best fit | Constraint |
|---|---|---|---|
filter: blur(...) on a pseudo-element or separate image layer |
The image layer itself | A blurred hero or section background with sharp foreground content | Keep text outside the filtered layer; extend and clip the layer if blur exposes edges. |
backdrop-filter: blur(...) on a panel |
Pixels behind the panel | A localized frosted-glass panel | The panel must be at least partly transparent, and ancestor backdrop roots can limit the affected region. |
Common problems and fixes
- The heading is blurry: The filter is on an element that contains the heading. Move the background image to a pseudo-element or separate sibling layer and keep content outside it.
- The backdrop blur is invisible: Give the panel a transparent or partly transparent background; an opaque background hides the filtered pixels.
- The panel blurs the wrong area: Check ancestor opacity, filters, masks, and blend modes for a backdrop root that bounds the effect.
- Blurred edges show gaps: Extend the image layer beyond the clipped container. Increase the inset as needed for the blur and crop.
- The text is still hard to read: Blur does not guarantee legibility. Add a suitable overlay or panel and check the contrast of the finished design; text over images can remain illegible even with a drop shadow, as MDN notes in its filter effects guide.
Or skip the browser setup
If you need a screenshot of the finished page without setting up a browser capture workflow, ScreenshotNeo can return an image or PDF from one request. For a WebP screenshot:
Quick Recap
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for options and setup. It removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; and its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
