Skip to content

Backdrop

Full-screen semi-transparent overlay. Useful for custom overlay scenarios outside of native <dialog>.

Usage

<div class="af-backdrop">
</div>

When to use

Custom modal implementations that don’t use <dialog>
Overlay behind popovers, menus, or custom drawers
Loading overlays

For standard modals and drawers, use the Dialog or Drawer patterns instead. They use native <dialog> which handles the backdrop automatically.

Preview

Content behind the backdrop

Content above backdrop

CSS reference

.af-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 999;
}