::backdropBaseline · Widely available

The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–36Not supported

37+Supportedsince Aug 26, 2014

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–46Not supported

47+Supportedsince Jun 7, 2016

Current: 157

Safari

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

MobileChrome Android

18–36Not supported

37+Supportedsince Sep 3, 2014

Current: 155

Firefox Android

4–46Not supported

47+Supportedsince Jun 7, 2016

Current: 157

Safari iOS

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: ::backdrop.

Feature detection

CSS · check before using

@supports selector(::backdrop) {
  /* styles that use ::backdrop */
}

/* or in JavaScript */
if (CSS.supports("selector(::backdrop)")) {
  // use it
}

Documentation (MDN)

::backdrop ↗

Specification

drafts.csswg.org#backdrop ↗

Sub-features

Support for each part of the feature (3). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
backdrop	37	79	47	15.4	37	47	15.4
backdrop.dialog	37	79	98	15.4	37	98	15.4
backdrop.inherit_from_originating_element	122	122	120	17.4	122	120	17.4