Allows styling of content behind the pop-up while the pop-up is open.
::backdrop CSS pseudo-element sits behind an open pop-up 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 pop-up is open—for example you might want to blur or darken it.
::backdrop neither inherits from nor is inherited by any other elements.
In the following example the rest of the content is darkened while the pop-up is shown:
- The Pop-Up 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.