::backdrop
The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
Overview
The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 37 | 79 | 47 | 15.4 | 37 | 15.4 | |
dialog Support on `dialog` elements | 32 | 79 | 98 | 15.4 | 32 | 15.4 |
inherit from originating element Backdrop elements inherit their values from its originating element | 122 | 122 | 120 | 17.4 | 122 | 17.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (32)
Notes 2 item(s)
Removed
- This feature was removed in a later browser version (79)
Compatibility
- Available with a vendor prefix: -ms- (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (32)
Syntax
CSS
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
video:fullscreen::backdrop {
background: #000;
}Live demo
Use cases
Using ::backdrop
The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features