Backdrop
Full-screen semi-transparent overlay. Useful for custom overlay scenarios outside of native <dialog>. Uses --af-z-overlay — see Z-index & layering.
Tip: If you’re using <dialog> with showModal(),
you don’t need this class. The native ::backdrop pseudo-element is styled
automatically by Airframe.
<div class="af-backdrop"></div>When to use
Section titled “When to use”- Custom modal implementations that don’t use
<dialog> - Overlay behind popovers, menus, or custom drawers
For full-page / auth waits, use Page Loader (af-page-loader + af-spinner). af-backdrop is a dimmed scrim, not an opaque canvas.
For standard modals and drawers, use the Dialog or Drawer patterns instead. They use native <dialog> which handles the backdrop automatically.
Preview
Section titled “Preview”CSS reference
Section titled “CSS reference”.af-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: var(--af-z-overlay);
}