CSS ::backdrop Pseudo-Element

The ::backdrop pseudo-element represents a full-viewport box displayed behind an element placed in the browser's top layer. It allows developers to customize the background behind modal dialogs, fullscreen elements, and open popovers using colors, transparency, gradients, and other visual effects.

Syntax

selector::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

The selector identifies an element that can be placed in the browser's top layer.

The ::backdrop pseudo-element targets the backdrop associated with that element.

The background-color property controls the backdrop's color and transparency.

For example, the following rule creates a semi-transparent black backdrop behind a modal dialog:

dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

The backdrop covers the viewport behind the modal dialog, visually separating the dialog from the page content.

Note: The ::backdrop pseudo-element is generated only when an element participates in the top layer in a way that provides a backdrop. It does not create a backdrop for ordinary elements.

How It Works

When certain HTML elements enter the browser's top layer, the browser creates a corresponding ::backdrop pseudo-element.

The backdrop appears behind the top-layer element and in front of underlying page content.

Common situations include:

A modal <dialog> opened using showModal().
An element displayed using the Fullscreen API.
An HTML element displayed as a popover using the popover attribute.

Each eligible top-layer element has its own backdrop, which can be styled independently.

The backdrop is generated by the browser and does not require an additional HTML element.

The ::backdrop pseudo-element does not automatically close a dialog or popover when clicked. Dismissal behavior depends on the associated element and its configuration.

The Top Layer

The top layer is a browser-managed rendering layer used for certain elements that must appear above ordinary page content.

Elements in the top layer are displayed above elements in the document's normal stacking contexts.

Unlike ordinary elements positioned with z-index, top-layer elements are not constrained by their ancestors' stacking contexts.

The browser manages the order of elements in the top layer.

Each eligible top-layer element can have an associated ::backdrop pseudo-element.

The backdrop is positioned immediately behind its associated top-layer element.

Developers cannot place an ordinary HTML element into the top layer simply by assigning a large z-index value.

Instead, the browser places supported elements into the top layer through features such as modal dialogs, fullscreen mode, and popovers.

The <dialog> element can display a modal dialog using the JavaScript showModal() method.

When opened modally, the dialog enters the top layer and receives a ::backdrop pseudo-element.

HTML:

<dialog id="example-dialog">
  <h2>Dialog Title</h2>
  <p>This is a modal dialog.</p>
  <button type="button" id="close-dialog">Close</button>
</dialog>
<button type="button" id="open-dialog">Open Dialog</button>

CSS:

dialog::backdrop {
  background-color: rgb(0 0 0 / 60%);
}

JavaScript:

const dialog = document.getElementById("example-dialog");
const openButton = document.getElementById("open-dialog");
const closeButton = document.getElementById("close-dialog");

openButton.addEventListener("click", function() {
  dialog.showModal();
});
closeButton.addEventListener("click", function() {
  dialog.close();
});

Clicking the Open Dialog button displays the modal dialog above the page content.

The backdrop darkens the underlying page using a semi-transparent black background.

Clicking the Close button closes the dialog and removes its backdrop.

Important: Calling show() instead of showModal() opens a non-modal dialog that does not receive the same top-layer backdrop behavior.

Fullscreen Element Backdrops

The Fullscreen API allows an HTML element to occupy the entire screen or available display area.

When an element enters fullscreen mode, it is placed in the top layer and can have an associated ::backdrop pseudo-element.

HTML:

<div id="fullscreen-box">
  <h2>Fullscreen Example</h2>
  <p>This content can enter fullscreen mode.</p>
  <button type="button" id="exit-fullscreen">Exit Fullscreen</button>
</div>
<button type="button" id="enter-fullscreen">Enter Fullscreen</button>

CSS:

#fullscreen-box {
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
}
#fullscreen-box::backdrop {
  background-color: #1a1a1a;
}

JavaScript:

const fullscreenBox = document.getElementById("fullscreen-box");
const enterButton = document.getElementById("enter-fullscreen");
const exitButton = document.getElementById("exit-fullscreen");

enterButton.addEventListener("click", function() {
  fullscreenBox.requestFullscreen();
});
exitButton.addEventListener("click", function() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  }
});

Clicking Enter Fullscreen requests fullscreen mode for the selected element.

The backdrop is styled with a dark background, although it may be hidden by the fullscreen element if that element completely covers the viewport.

Fullscreen requests generally require a user interaction and may be rejected by the browser or operating environment.

Users can typically exit fullscreen mode using the Escape key.

HTML elements with the popover attribute can be displayed in the browser's top layer.

Open popovers can have a ::backdrop pseudo-element, allowing developers to style the area behind them.

HTML:

<button type="button" popovertarget="help-popover">Show Help</button>
<div id="help-popover" popover>
  <h2>Help Information</h2>
  <p>This popover contains additional information.</p>
</div>

CSS:

#help-popover {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
#help-popover::backdrop {
  background-color: rgb(0 0 0 / 30%);
}

Clicking the Show Help button opens the popover without requiring JavaScript.

The backdrop applies a semi-transparent dark overlay behind the popover.

Unlike a modal dialog, an ordinary popover does not make the rest of the page inert.

Auto popovers can generally be dismissed by clicking outside them or pressing Escape.

The backdrop's appearance does not determine whether the popover is modal or how it is dismissed.

Styling the Backdrop

The ::backdrop pseudo-element supports background colors, transparency, gradients, and other visual styling.

Solid Background

dialog::backdrop {
  background-color: #333;
}

This rule creates a solid dark backdrop that completely obscures the underlying page content.

Semi-Transparent Background

dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

The alpha value creates a semi-transparent background, allowing the underlying page to remain partially visible.

Gradient Background

dialog::backdrop {
  background: linear-gradient(
    135deg,
    rgb(0 51 102 / 70%),
    rgb(0 0 0 / 80%)
  );
}

The linear-gradient() function creates a transition between two semi-transparent colors.

Gradients can provide a more distinctive backdrop while still separating the top-layer element from the underlying page.

Example

The following example creates a styled modal dialog with a semi-transparent backdrop and a subtle blur effect.

HTML:

<button type="button" id="show-modal">View Information</button>
<dialog id="info-modal">
  <h2>Additional Information</h2>
  <p>This modal dialog appears above the page content.</p>
  <button type="button" id="hide-modal">Close Dialog</button>
</dialog>

CSS:

#info-modal {
  width: min(90%, 400px);
  padding: 24px;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 20%);
}
#info-modal::backdrop {
  background-color: rgb(0 0 0 / 55%);
  backdrop-filter: blur(4px);
}
#info-modal button {
  padding: 10px 16px;
  background: #0066cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#info-modal button:hover {
  background: #004c99;
}
#info-modal button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

JavaScript:

const modal = document.getElementById("info-modal");
const showModalButton = document.getElementById("show-modal");
const hideModalButton = document.getElementById("hide-modal");

showModalButton.addEventListener("click", function() {
  modal.showModal();
});
hideModalButton.addEventListener("click", function() {
  modal.close();
});

Clicking View Information opens the modal dialog in the browser's top layer.

The backdrop darkens and blurs the page content behind the dialog.

The dialog itself remains clear and readable because the blur is applied to its backdrop rather than to the dialog.

Clicking Close Dialog closes the modal and removes the backdrop.

The dialog also supports the browser's standard modal keyboard behavior, including Escape-based dismissal where permitted.

Using Backdrop Filters

The CSS backdrop-filter property can apply graphical effects to the content behind the backdrop.

Common effects include blur, brightness adjustments, and grayscale.

Blur Effect

dialog::backdrop {
  background-color: rgb(0 0 0 / 40%);
  backdrop-filter: blur(5px);
}

The blur() function softens the underlying page content while the semi-transparent background darkens it.

Brightness Adjustment

dialog::backdrop {
  background-color: transparent;
  backdrop-filter: brightness(50%);
}

The brightness()` function reduces the apparent brightness of the content behind the backdrop.

Grayscale Effect

dialog::backdrop {
  background-color: rgb(0 0 0 / 20%);
  backdrop-filter: grayscale(100%);
}

The grayscale()` function removes color from the underlying page content.

Backdrop filters are visual enhancements and should not be required for the dialog or popover to function.

Use a suitable background color as a fallback when a filter is unavailable.

::backdrop vs. CSS Overlays

The ::backdrop pseudo-element and an ordinary CSS overlay can produce similar visual effects, but they are implemented differently.

::backdrop

Created automatically by the browser for eligible top-layer elements.
Does not require an additional HTML element.
Appears behind its associated top-layer element.
Participates in the browser's top-layer rendering behavior.
Can be styled using the ::backdrop selector.

CSS Overlay

Usually created using an ordinary HTML element.
Can use position: fixed to cover the viewport.
Participates in ordinary CSS stacking contexts.
Requires developers to manage its visibility and stacking order.
Does not automatically provide modal dialog behavior.

For example, an ordinary overlay might use:

.overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  z-index: 1000;
}

This overlay covers the viewport within the document's stacking system.

However, a large z-index value does not place the overlay into the browser's top layer.

For modal dialogs and other supported top-layer features, ::backdrop is generally the more appropriate solution.

Limitations

The ::backdrop pseudo-element has several important limitations.

It is available only for elements that receive a backdrop through the browser's top-layer behavior.
It cannot be added to an ordinary element simply by writing a ::backdrop rule.
It does not provide modal behavior by itself.
It does not automatically close dialogs or popovers when clicked.
Its appearance may be hidden by a fullscreen element that completely covers the viewport.
It does not inherit CSS properties from its originating element in the usual way.

For example, the following rule does not create a backdrop behind an ordinary paragraph:

p::backdrop {
  background: rgb(0 0 0 / 50%);
}

A paragraph in normal document flow does not receive a browser-generated backdrop.

Use ::backdrop with supported top-layer elements rather than as a general-purpose overlay mechanism.

Accessibility Considerations

Backdrops can improve visual focus by separating a modal dialog or other top-layer element from the underlying page.

However, backdrop styling alone does not provide accessibility or modal interaction behavior.

Use the native <dialog> element and showModal() when a modal interaction is required.
Provide a clear heading or accessible name for modal dialogs.
Include an obvious way to close the dialog.
Preserve visible keyboard focus indicators.
Maintain sufficient contrast between the dialog and its backdrop.
Avoid excessive blur, flashing effects, or distracting animations.
Do not rely on backdrop color alone to communicate important information.

Native modal dialogs help manage focus and make underlying page content inert while the dialog is open.

Ordinary popovers do not automatically provide the same modal behavior.

When customizing top-layer interfaces, test keyboard navigation and screen reader interaction to ensure that users can understand and dismiss the content.

Browser Support

The ::backdrop pseudo-element is widely available in modern browsers, including Chrome, Edge, Firefox, Safari, and Opera.

Support for individual features that generate backdrops, such as modal dialogs, the Fullscreen API, and the Popover API, may vary independently.

The backdrop-filter property also has its own browser compatibility considerations.

For current compatibility information, visit Can I Use? .

Test backdrop styling in the browsers and devices used by your audience, especially when combining it with filters, animations, or newer HTML features.

Specifications

The ::backdrop pseudo-element is defined in the Fullscreen API Standard .

The behavior of modal dialogs and popovers is defined in the WHATWG HTML Living Standard .

These specifications describe how eligible elements enter the top layer and how their associated backdrops participate in rendering.

CSS ::backdrop Pseudo-Element