This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::backdrop CSS pseudo-element is a box rendered immediately below any element rendered in fullscreen mode (and above any lower elements in the stack).

dialog::backdrop {
  background: rgba(255,0,0,.25);

Fullscreen elements are part of the top layer's stack, i.e., they are rendered in front of all other content. The ::backdrop pseudo-element can be used to style or hide the underlying document.

::backdrop does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element.




Specification Status Comment
Fullscreen API
The definition of '::backdrop' in that specification.
Living Standard Initial definition.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support


32 -webkit-

Yes -ms- 47 11 -ms- No No
Support on dialog elements 32 No No No No No
Fullscreen support No Yes 47 11 No No
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support No ? Yes -ms- 47 No No ?
Support on dialog elements No ? No No No No ?
Fullscreen support No ? Yes 47 No No ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.