Scrim
The translucent dark layer behind a modal that dims the page and shows that the content underneath is temporarily blocked.
See it
What it is
A scrim is the translucent layer between a modal surface and the page behind it. It lowers the contrast of the background, makes the active dialog or sheet feel closer, and signals that the covered content is temporarily unavailable. Material Design uses the word scrim; the native HTML dialog element exposes its version as the ::backdrop pseudo-element.
Use a scrim behind modal dialogs, drawers, and bottom sheets that block the page. Black at roughly 40 to 60 percent opacity is a common starting point, but the right value depends on the surface and theme. A small backdrop-filter blur can add separation, though dimming alone is usually clearer and cheaper to render.
Gotcha: do not set opacity on a parent that also contains the modal, or the modal will fade with it. Give the scrim its own background color and stacking layer. If clicking it dismisses the surface, make that a convenience rather than the only exit: keep a visible Close or Cancel control and support Escape.
Ask AI for it
Add a scrim behind this modal using the native dialog::backdrop pseudo-element. Set its background to rgb(0 0 0 / 50%), cover the full viewport, and keep the dialog itself fully opaque in the top layer. Close on Escape and when pointer coordinates land outside the dialog's content bounds, but not when the user clicks inside. Fade the backdrop in and out over 150ms using @starting-style plus transition-behavior: allow-discrete on display and overlay so the close animation actually runs; disable that transition under prefers-reduced-motion, lock page scrolling while open, and keep an explicit Close or Cancel button inside the modal.