::backdrop

The ::backdrop CSS pseudo-element sits behind an open popover in the stacking order, but in front of the rest of the document, and spans the entire width and height of the viewport. It allows the rest of the content to be styled while the popover is open—for example you might want to blur or darken it.

::backdrop neither inherits from nor is inherited by any other elements.

# Syntax

::backdrop

# Example

In the following example the rest of the content is darkened while the popover is shown:

p[popover]::backdrop {
  background-color: rgba(0,0,0,0.5);
}

# Browser compatibility

• The Popover API is planned for launch in Chrome 110, available in stable in early February 2023 (check the Chrome Roadmap for updates).
• It is enabled by default in Chrome Canary for local testing.
• Register for the Origin Trial if you want to test it in a production environment. Read Getting started with Chrome's origin trials for more information.
• There is a polyfill available at https://github.com/oddbird/popup-polyfill.

# See also

• The Popover API
• Pop-ups: They're making a resurgence!, by Jhey Tompkins
• Chrome Platform Status: The Popover API
• Open UI: Popover API Explainer