::backdrop

::backdrop styles a special box that the browser automatically inserts directly behind certain elements when they enter a special display mode. The most common examples are a <dialog> opened with showModal() or any element displayed using the Fullscreen API. It sits between the element and the rest of the page, making it ideal for dimming or blurring the background behind a modal.

Basic usage with <dialog>

CSS

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

HTML

<dialog id="confirm-dialog">
  <p>Are you sure you want to delete this item?</p>
  <button id="confirm">Delete</button>
  <button id="cancel">Cancel</button>
</dialog>

<script>
  const dialog = document.getElementById('confirm-dialog')
  dialog.showModal() // ::backdrop only appears for a modal dialog
</script>

The ::backdrop box exists only while the dialog is open in modal mode using showModal(). A <dialog> opened with show() or simply using the open attribute does not receive a backdrop.

Worked example: a polished modal overlay

CSS

.modal {
  border: none;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Semi-transparent, slightly blurred overlay behind the modal */
.modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

Fullscreen elements

CSS

/* Style the backdrop shown behind an element that has
   entered fullscreen via element.requestFullscreen() */
video::backdrop {
  background: black;
}

Note

::backdrop has a very specific purpose. It only styles the browser-generated backdrop behind a modal <dialog> or a fullscreen element. It cannot be used as a general-purpose overlay behind arbitrary elements. For custom popups, menus, or sidebars, you'll still need to create a real overlay element such as a <div> with position: fixed.