::backdrop
::backdrop styles the backdrop behind a <dialog> element or a fullscreen element. It sits directly above the viewport but below the element.
CSS
Intermediate
4 min read
::backdrop Pseudo-Element
Example
/* Style dialog backdrop */
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* Fullscreen element backdrop */
video:fullscreen::backdrop {
background: black;
}
:root:fullscreen::backdrop {
background: linear-gradient(135deg, #1a1a2e, #16213e);
} Pro Tip
::backdrop is the only way to style the overlay behind native <dialog> elements — no JavaScript needed.