ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
backdrop-filter applies effects to pixels painted behind an element, so it can blur or tint an image visible through an overlay while leaving the overlay’s text and controls clear. Give the overlay a partly transparent background so the filtered backdrop can show through, and provide a readable fallback for browsers that do not support the property.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
CSS Cookbook, 3rd Edition (Animal Guide) | $32.68 | Buy on Amazon |
| 2 |
|
HTML & CSS: The Comprehensive Guide to Excelling in HTML5 and CSS3 for Responsive Web Design,... | $51.36 | Buy on Amazon |
| 3 |
|
CSS Cookbook, 2nd Edition | $6.24 | Buy on Amazon |
| 4 |
|
JavaScript Cookbook: Programming the Web | $58.44 | Buy on Amazon |
| 5 |
|
CSS Cookbook | $110.78 | Buy on Amazon |
backdrop-filter versus filter
backdrop-filter changes the visible pixels behind its target. filter applies effects to its target element and its content. Use the former when you want an overlay to change the appearance of an image behind it without applying the effect to the overlay’s own text.
The smallest working example
Place a translucent surface over an image and apply the backdrop effect to that surface:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
HTML: <div class=”image-wrap”><img src=”mountain.jpg” alt=”Snow-covered mountain at sunset”><div class=”surface”>Frosted image caption</div></div>
CSS: .image-wrap { position: relative; } .image-wrap img { display: block; width: 100%; height: auto; } .surface { position: absolute; inset: auto 1rem 1rem; padding: 1rem; color: white; background: rgb(10 18 30 / 45%); backdrop-filter: blur(14px); }
The alpha channel in the background color lets the image remain visible through the panel. An opaque background covers the backdrop, making the effect invisible.
Build a polished glass image card
Contain the image and overlay within a positioned card, then apply the translucent background and filter to its caption surface.
HTML: <figure class=”image-card”><img src=”mountain.jpg” alt=”Snow-covered mountain at sunset”><figcaption class=”image-card__caption”>Alpine light</figcaption></figure>
CSS: .image-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 1.25rem; } .image-card img { display: block; width: 100%; height: auto; } .image-card__caption { position: absolute; inset: auto 1rem 1rem; padding: 1rem; color: white; background: rgb(10 18 30 / 45%); border: 1px solid rgb(255 255 255 / 24%); border-radius: 0.9rem; backdrop-filter: blur(14px) saturate(140%); }
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
isolation: isolate can provide a deliberate compositing boundary. Correct positioning and a visible backdrop are still essential.
Combine backdrop effects
Filter functions are separated by spaces, and their order can affect the result. Test combinations over the images used in your design.
Frosted glass
CSS: .caption { color: white; background: rgb(255 255 255 / 18%); border: 1px solid rgb(255 255 255 / 28%); backdrop-filter: blur(16px) saturate(150%); }
Blur softens detail, while saturation retains color. The translucent fill and border establish the glass-like surface.
Rank #3
- Used Book in Good Condition
Dark overlay
CSS: .cinematic-overlay { color: white; background: rgb(0 0 0 / 38%); backdrop-filter: brightness(62%) contrast(112%) saturate(85%); }
Check text contrast over representative images; a setting that works over one image may not work over another.
Useful filter functions
| Function | Typical use |
|---|---|
blur() |
Softening the visible backdrop. |
brightness() |
Lightening or darkening it. |
contrast() |
Changing tonal separation. |
drop-shadow() |
Applying a shadow effect. |
grayscale() |
Creating a muted treatment. |
hue-rotate() |
Shifting backdrop colors. |
invert() |
Creating an inverted treatment. |
opacity() |
Changing backdrop opacity. |
saturate() |
Changing color intensity. |
sepia() |
Creating a warm, vintage treatment. |
url() |
Referencing an SVG filter. |
Why does backdrop-filter appear to have no visible effect?
- The surface is opaque. Use a partly transparent background, such as
rgb(255 255 255 / 30%), so the processed pixels can show through. - There is no visible content behind it. Place an image, gradient, video, or other painted content beneath the surface. A flat color may show little visible blur.
- An ancestor creates a backdrop root. Filtering stops at the nearest backdrop root. The root element and ancestors with properties such as a non-
nonefilter, opacity below1, a mask or clip-path, a non-nonebackdrop filter, non-normal mix-blend mode, or relevantwill-changevalue can restrict which pixels are available. Inspect ancestors and test by temporarily removing those properties. - The surface is too small or behind the image. Give it a useful paint area and ensure it is positioned above the backdrop.
- The effect is subtle or unsupported. Test over detailed imagery and check the browsers and devices your audience uses.
Provide a fallback
Make the panel readable even when backdrop filtering is unavailable. A feature query can apply the translucent treatment only when supported:
CSS: .surface { color: #fff; background: rgb(20 28 42 / 88%); } @supports (backdrop-filter: blur(1px)) { .surface { background: rgb(20 28 42 / 48%); backdrop-filter: blur(14px); } }
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #4
The fallback does not have to imitate blur; a solid or more opaque panel is preferable to an unreadable caption.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Accessibility and performance
Transparency can make contrast unpredictable as the image changes. Test text over light and dark portions of representative images, use a sufficiently opaque tint, keep meaningful information in the document, and preserve visible keyboard focus indicators. Do not make essential information available only on hover.
Large or overlapping filtered areas may require more rendering work than a small caption. Keep effects limited to surfaces where they help, be cautious with large animated regions, and test the page on the devices your audience uses.
Browser support
MDN Web Docs classifies backdrop-filter as Baseline 2024, meaning it has worked across the latest devices and browser versions since September 2024. MDN cautions that older browsers and devices may not support it, so check compatibility against your audience and keep a fallback. See MDN’s backdrop-filter reference and guide to using filter effects.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Best Value
- Used Book in Good Condition
Frequently Asked Questions
Why does backdrop-filter need a transparent background?
The property filters pixels painted behind the element. A partly transparent background lets the filtered pixels show through; an opaque background covers them.
Does backdrop-filter blur the text inside the panel?
No. It affects the visible content behind the target, not the target’s own foreground content. The filter property applies effects to its target and content.
What should I check if the effect is not visible?
Confirm there is visible content behind a partly transparent surface, then inspect ancestors for a backdrop root that may restrict the pixels available to filter.
Is backdrop-filter supported in all browsers?
MDN labels it Baseline 2024 but notes that older browsers and devices may not support it. Verify your target browser set and provide a readable fallback.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
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.
