Allows styling of content behind the popover while the popover is open.

Published on Updated on

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.




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

See also

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.