# CSS `::backdrop` Pseudo-element

The `::backdrop` pseudo-element is a box the size of the viewport which is rendered immediately beneath any element that is presented in the top layer.

## 1. When is it used?

The `::backdrop` pseudo-element appears when an element is placed in the **top layer** of the browser's stacking context. This happens in two main scenarios:

1.  **Fullscreen API:** When an element is displayed in fullscreen mode (`element.requestFullscreen()`).
2.  **Dialog Element:** When a `<dialog>` element is opened as a modal (`dialog.showModal()`).
3.  **Popover API:** When a popover is shown.

It allows you to style the background behind the modal or fullscreen element, often used to dim or blur the rest of the page.

## 2. Basic Usage

```css
/* Style the backdrop of a modal dialog */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  backdrop-filter: blur(5px);           /* Blur the content behind */
}
```

```css
/* Style the backdrop of a fullscreen video */
video::backdrop {
  background-color: black;
}
```

## 3. Inheritance

The `::backdrop` pseudo-element does **not** inherit from any element. It also does not inherit from the element it is associated with.

## 4. Example: Modal Dialog

```html
<dialog id="myDialog">
  <p>This is a modal!</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>
```

```css
dialog::backdrop {
  background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(50,0,0,0.8));
}
```

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/javascript/vanilla/fullscreen-api]]
[[programming/css/filters]]