::backdrop CSS Pseudo Element


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);

This code will create a modal dialog with a black background that is 50% transparent. The backdrop behind the modal dialog will be black and 30% transparent.

The ::backdrop pseudo-element is a powerful tool for styling elements in fullscreen mode and modal dialogs. It can be used to create more immersive and engaging experiences for users.


::backdrop {
  /* ... */


<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>
const showDialogBtn = document.getElementById('showDialogBtn');
const favDialog = document.getElementById('favDialog');

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

button {
font-size: 1.2rem;
padding: 5px 15px;

dialog::backdrop {
background-color: lime;


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023