::backdrop
The layer right behind a modal `<dialog>` or an element in full-screen mode.
Syntax
dialog::backdrop { … }Examples
A dark backdrop behind a modal dialog:
<style>
dialog::backdrop { background: rgb(0 0 50 / 0.6); }
</style>
<button onclick="document.querySelector('dialog').showModal()">Open dialog</button>
<dialog>
<p>The page behind is dimmed.</p>
<form method="dialog"><button>Close</button></form>
</dialog>Notes
It appears only for a dialog opened with showModal() — a dialog opened with show() has no backdrop.
See also
- backdrop-filter — Applies filters to everything behind the element — the frosted glass effect.
- <dialog> — A dialog box; a modal one is opened with `showModal()` and blocks the rest of the page.
Related recipes
In the tutorial
- Disclosure widgets and dialogs — The details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.