CSS ::backdrop Pseudo-element
The ::backdrop pseudo-element is a box the size of the viewport which is rendered immediately beneath any element that is presented in the top layer.
1. When is it used?
The ::backdrop pseudo-element appears when an element is placed in the top layer of the browser's stacking context. This happens in two main scenarios:
- Fullscreen API: When an element is displayed in fullscreen mode (
element.requestFullscreen()). - Dialog Element: When a
<dialog>element is opened as a modal (dialog.showModal()). - Popover API: When a popover is shown.
It allows you to style the background behind the modal or fullscreen element, often used to dim or blur the rest of the page.
2. Basic Usage
/* Style the backdrop of a modal dialog */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
backdrop-filter: blur(5px); /* Blur the content behind */
}/* Style the backdrop of a fullscreen video */
video::backdrop {
background-color: black;
}3. Inheritance
The ::backdrop pseudo-element does not inherit from any element. It also does not inherit from the element it is associated with.
4. Example: Modal Dialog
<dialog id="myDialog">
<p>This is a modal!</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>dialog::backdrop {
background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(50,0,0,0.8));
}programming/css/css programming/css/pseudo-classes-and-pseudo-elements programming/javascript/vanilla/fullscreen-api programming/css/filters