The translucent layer behind this card is the scrim.
The dark layer itself is the scrim — click it to dismiss
Scrim (Backdrop / Overlay)
/ ::backdrop · <dialog> /
also called backdrop, overlay, modal overlay
A scrim is the translucent full-area layer between an open modal surface and the content behind it. It lowers background contrast, prevents accidental interaction, and makes the active layer obvious. Native HTML dialogs expose this layer as the ::backdrop pseudo-element.
If you called it…
…you meant Scrim (Backdrop / Overlay).
Anatomy — every part, named
- 1Dim layer
::backdrop“The dark see-through layer behind the popup” is the scrim's dim layer.
- 2Backdrop blur
backdrop-filter“The page going soft behind the dark overlay” is the backdrop blur.
- 3Light-dismiss area
HTMLDialogElement.close()“The outside area I click to close the modal” is the light-dismiss area.
Prompt — paste into your agent
Add a scrim behind the modal using the <dialog>::backdrop pseudo-element. It should cover the viewport, dim and optionally blur the page, intercept pointer input, and fade reversibly with the modal.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my scrim/backdrop (::backdrop, fixed overlay). Rule out: scrolling chaining through to the page — set overscroll-behavior contain and lock body scroll; the scrim stacking under content because a transformed ancestor created its own stacking context; pointer-events still active while it fades out so it eats clicks invisibly; the dialog ::backdrop unstylable because the dialog was opened with show() not showModal(). The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | ::backdrop | |
| HTML | <dialog> | |
| CSS | backdrop-filter |