::backdrop CSS Pseudo Element

The ::backdrop pseudo-element represents the area behind an element that is shown in special presentation modes - most commonly a fullscreen element or a modal dialog. It lets authors style the “overlay” that appears between the presented element and the rest of the document, so you can darken, blur, or animate the backdrop independently from the element itself.

What it targets

• Created when an element is presented in fullscreen or when a modal dialog is shown; it covers the viewport (or the document area for modal dialogs) behind that element.
• It is rendered between the presented element and the page content, so the presented element sits above the backdrop and the page content sits below it.

Box and stacking behavior

• The ::backdrop is a pseudo-element box that participates in layout/painting as the “overlay” layer for that presentation mode.
• It is positioned to cover the visible area behind the element (usually the viewport) and acts as the visual barrier between the focused/presented element and the page.
• Because it is part of the element’s presentation layer, its stacking places it above the document content but beneath the presented element itself.

Styling capabilities and practical notes

• You can style ::backdrop with visual properties (background, background-image, gradients, opacity, color, box-shadow, border-radius, transforms, filters, transitions, and animations) to create fades, blurs, tints, or patterned overlays.
• It behaves like any other element box for CSS effects: you can animate its opacity or transform, apply transitions, and create entrance/exit animations.
• Pointer events can be controlled (e.g., pointer-events: none to allow clicks to pass through), but in many modal contexts the UA also manages interaction blocking; consider accessibility and keyboard focus when changing pointer behavior.
• Use contrast and motion considerations (reduced-motion) when animating the backdrop so it remains accessible.

Common use cases

• Darkening the background behind a fullscreen video or image to focus attention.
• Adding a subtle blur or frosted-glass effect behind a modal dialog.
• Animating the backdrop during open/close to create smooth transitions (fade-in/fade-out or slide/scale effects).

Examples

Simple translucent dark overlay for any presented element:

::backdrop {
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 200ms ease;
  /* optional: ensure it covers the viewport and sits behind the presented element */
}

Using a gradient backdrop and a subtle blur with an entrance animation:

::backdrop {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7));
  backdrop-filter: blur(6px); /* may be expensive; test performance */
  opacity: 0;
  animation: backdropFadeIn 240ms forwards ease;
}
@keyframes backdropFadeIn {
to { opacity: 1; }
}

Targeting a dialog’s backdrop specifically (styling the overlay for a modal dialog):

dialog::backdrop {
  background: rgba(10, 10, 10, 0.5);
  transition: background 160ms ease;
}

Accessibility tips

• Prefer subtle and brief animations; respect prefers-reduced-motion by reducing or disabling backdrop animations for users who request reduced motion.
• Make sure the presented element remains keyboard-focusable and that backdrop styling does not interfere with focus outlines or visibility of important content.
• If you change pointer-events on the backdrop, ensure this does not break expected dismissal or interaction patterns for dialogs or fullscreen controls.