In CSS, what does the `::backdrop` pseudo-element style, and which elements have one?

## What it is Before `::backdrop`, dimming the page behind a modal meant an extra element — a `<div class="overlay">` positioned `fixed; inset: 0` with a translucent background, plus the z-index bookkeeping to keep it under the modal and over everything else. `::backdrop` replaces that pattern with a pseudo-element the browser creates for you. It exists for an element only while that element is rendering in the **top layer**, which happens when a `<dialog>` is opened as a modal, when an element with the HTML `popover` attribute is shown, or when an element is displayed fullscreen. A `<dialog>` that is merely present in the markup, or opened non-modally, has no backdrop. The box is sized to the viewport and painted immediately behind its originating element, so it sits above all ordinary page content without any `z-index` from you. ```css dialog::backdrop { background: rgb(0 0 0 / 0.6); } ``` ## What it is not It is not a DOM node. There is nothing to query, nothing to attach a click handler to, and no way to place text or children inside it. Unlike `::before` and `::after` it does not need — or accept — a `content` property; the browser generates the box unconditionally. Practically, this means "close the dialog when the user clicks the backdrop" is not implemented by listening on the backdrop; a common approach is to listen on the dialog element and compare the click coordinates against its box, which is JavaScript's problem rather than CSS's. ## What you can style It is a real box, so most background and visual properties apply: `background` (colour, gradient, image), `backdrop-filter` for blurring the page behind it, `opacity`, and `transition` / `animation`. Layout properties are mostly pointless because the browser sizes it to the viewport. ```css dialog::backdrop { background: rgb(15 15 20 / 0.55); backdrop-filter: blur(4px); } [popover]::backdrop { background: transparent; } ``` Animating it is the one place with real subtlety. Because the element is added to and removed from the top layer rather than merely changing opacity, a straightforward `transition` on the backdrop has nothing to transition from when it appears, and the element is gone before a fade-out can run. The pieces that make this work are `@starting-style` for the entry value and `transition-behavior: allow-discrete` so discrete properties participate; browsers additionally expose an `overlay` property so the element stays in the top layer for the duration of the exit transition. Support for that combination is more recent than `::backdrop` itself, so verify it against your support floor rather than assuming it. ## The inheritance wrinkle Originally `::backdrop` was specified as inheriting from nothing — it had no parent for the purposes of the cascade — which surprised people whose theme custom properties were defined on `:root` and did not reach it. The specification was later changed so that `::backdrop` inherits from its **originating element**, and current Chromium implements that. If you rely on inherited custom properties inside a backdrop rule, confirm the behaviour in your target browsers; setting the value explicitly on the backdrop rule is the portable choice. ## Where it fits Treat `::backdrop` as the CSS half of the top-layer story: the top layer solves "my overlay must be above everything", and `::backdrop` solves "and everything behind it must be dimmed", both without an extra element and without a single `z-index`. If you are still hand-rolling a scrim div for a modal, that is a sign the component predates the dialog element rather than a requirement of the design.