::backdrop

Avatar of Mojtaba Seyedi
Mojtaba Seyedi on

Take your JavaScript to the next level at Frontend Masters.

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog> or any element that enters fullscreen mode using the Fullscreen API.

dialog::backdrop {
  background-color: darkorange;
}
The backdrop is selectable as a pseudo-element when an element is opened in the browser’s fullscreen mode.

Bottom line: we get something to hook into for styling the full background behind elements when the browser is in fullscreen mode. And when we say “fullscreen mode” what we’re talking about is the browser taking up the entire screen of a monitor — not to be confused with the browser viewport. Often, fullscreen mode is triggered by an option in the operating system to expand a window.

Showing the top part of the Safari browser with the green dot button over at the left of the browser window open with options to enter full screen, move the window to the left side of the screen, or move the window to the right side of the screen.
MacOS provides an option in the UI of a window to expand that window to fullscreen.

::backdrop does not inherit from any element and is not inherited from. So, there’s no cascade happening where you might run into a conflict between the backdrops of two elements.

Styling the backdrop of a dialog

Consider the following <dialog> element in HTML:

<dialog>
  <h2>I'm a dialog window</h2>
  <button onclick="closeDialog()">Close</button>
</dialog>  

<button onclick="openDialog()">Open dialog</button>

::backdrop can be used to style behind a <dialog> when the dialog is displayed with HTMLDialogElement.showModal(), which is currently experimental, but is what provides the ::backdrop.

var dialog = document.querySelector('dialog');
function openDialog() {  
  dialog.showModal();
}
function closeDialog() {  
  dialog.close();
}

Now, if we click on the button and open the dialog, the following CSS works:

dialog::backdrop {
  background-color: darkorange;
  background-image: linear-gradient(
    130deg,#ff7a18,
    #af002d 41.07%,
    #319197 76.05%
  );
}

Open the <dialog> element in the following demo and see the style that we applied to dialog’s backdrop:

Styling the backdrop of an element in fullscreen mode

When media, like images and videos, enter fullscreen mode, it’s possible that they won’t cover the entire viewport. Like, there might be empty space around it. Currently, Chrome’s default style for the backdrop looks like this:

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

With ::backdrop, we can style it ourselves or simply tweak what’s already there. For example, how about a slightly darker background?

video::backdrop {
  background: hsla(0, 0%, 0%, .5);
}

The backdrop in the following demo is visible because the width of the video is narrower than the width of the entire viewport.

Transforms, animations and hover states

Since there are no restrictions on what properties we can declare on this pseudo-element, it’s possible to add animations and transforms to a backdrop — or even change the style on states, like hover:

.element::backdrop {
  animation: move 5s infinite linear paused both;
  background: conic-gradient(red, orange, yellow, green, blue);
}

.element:hover::backdrop {
  animation-play-state: running;
}

@keyframes move {
  50% {
    transform: scale(0.9);
  }  
}

Browser support

IEEdgeFirefoxChromeSafariOpera
11All4732No19
iOS SafariOpera MobileAndroid BrowserChrome for AndroidFirefox for Android
No6492AllAll

More information