Allows styling of content behind the pop-up while the pop-up is open.

Published on Updated on

The ::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:

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.