::backdrop CSS Pseudo Element

Description

The CSS ::backdrop pseudo-element represents a box that is rendered immediately below an element that is in fullscreen mode or a <dialog> element. It can be used to style the background behind these elements, such as by changing the color, opacity, or adding a blur effect.

The ::backdrop pseudo-element is useful for creating modal dialogs and other elements that need to stand out from the rest of the page. It can also be used to create a more immersive experience for users when they are viewing content in fullscreen mode.

To style the ::backdrop pseudo-element, you can use any CSS property that applies to boxes, such as background-color, opacity, and backdrop-filter.

Here is an example of how to use the ::backdrop pseudo-element to style a modal dialog:

.modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 100;

}



.modal::backdrop {

  background-color: rgba(0, 0, 0, 0.3);

}

Syntax

::backdrop {
  /* ... */
}

Example

<button id="showDialogBtn">Show a dialog</button>



<dialog id="favDialog">

  <form method="dialog">

    <p>The background shown outside of this dialog is a backdrop.</p>

    <button id="confirmBtn">Close the dialog</button>

  </form>

</dialog>

<script>

const showDialogBtn = document.getElementById('showDialogBtn');

const favDialog = document.getElementById('favDialog');



showDialogBtn.addEventListener('click', () => favDialog.showModal());



</script>

button {

  font-size: 1.2rem;

  padding: 5px 15px;

}



dialog::backdrop {

  background-color: lime;

}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::backdrop pseudo element.

Desktop
79	37	47	24	15.4

Tablets / Mobile
37	47	24	15.4	3	37

Last updated by CSSPortal on: 1st October 2023