The translucent layer behind this card is the scrim.
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.
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.
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 |