Backdrop Filter Property
Last updated: 2026-09-13
backdrop-filter Backdrop Filter Property
backdrop-filter applies filter effects (such as blur or brightness) to the area behind an element, and is the standard way to build frosted-glass effects. Unlike filter, it affects the content below the element rather than the element itself. Support in modern browsers is good, but the element's background must be at least partially transparent for the effect to be visible.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
backdrop-filter: none | <filter-function>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No backdrop filter |
<filter-function> | Type | Background blur/filter effect |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backdrop-filter | ✓ v79 | ✓ v79 | ✓ v103 | ✓ v9 | ✓ v66 |
| Supported in all major browsers | |||||
Tip： backdrop-filter needs a transparent or semi-transparent element background for the filtered content behind it to show through.
Important： Difference from filter: filter affects the element itself, while backdrop-filter affects the content behind the element.
❓ FAQ
QWhat is the difference between backdrop-filter and filter?
Afilter applies to the element itself and the rendered result of its children. backdrop-filter applies to the content 'showing through' behind the element — it filters the background layer without touching the element's own text and content. The typical use is a frosted-glass navbar with backdrop-filter: blur(10px), which needs a semi-transparent background to be visible. They can be combined, and both create a stacking context.
QWhat is the browser support for backdrop-filter?
AModern browsers support it broadly: Chrome 76+, Edge 76+, Firefox 103+ (enabled by default), and Safari 9+ (with the -webkit- prefix). Write both -webkit-backdrop-filter and backdrop-filter. IE has no support, and the element needs a semi-transparent background for the effect to show.
QWhy isn't my frosted-glass effect working?
ACommon causes: the element background is fully opaque (e.g. background: #fff), covering the content behind it; the -webkit- prefix is missing so older Safari skips it; the browser does not support it (IE); or there is simply nothing blurrable behind the element. The correct setup: a semi-transparent background such as rgba(255,255,255,0.3) with actual content behind.
QWhich filter functions does backdrop-filter support?
AThe same set as filter: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), saturate(), opacity(), and drop-shadow(), which can be combined with spaces. Frosted glass plus a saturation boost is a common navbar combination.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
