Overlays & feedback

Scrim / Overlay / Backdrop

Q: How do people describe a Scrim / Overlay / Backdrop in plain words?

the dark translucent layer behind a popup the thing that dims the page so the dialog stands out the gray area I click to close the popup

Q: How do I implement a Scrim / Overlay / Backdrop?

Style the modal's scrim using the ::backdrop pseudo-element: rgba(0,0,0,0.45), with a fade-in transition; clicking it closes the dialog when appropriate.

A translucent layer under an overlay that dims the page and blocks clicks.

Also known as backdrop · overlay · dim layer

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Scrim / Overlay / Backdrop".

Style the modal's scrim using the ::backdrop pseudo-element: rgba(0,0,0,0.45), with a fade-in transition; clicking it closes the dialog when appropriate.

Anatomy:
- fill: Usually rgba(0,0,0,0.45)—too light fails hierarchy; too dark feels harsh.
- click interception: Functional core, not only visual decoration.

Preferred API / pattern: `Dialog overlay / fixed inset-0 bg-black/45`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Always closing on scrim click for multi-field forms
○Avoid: Scrim itself scrolls the page
○Avoid: Hand-rolled div fighting z-index wars

In plain wordsHow people search for it

“the dark translucent layer behind a popup”“the thing that dims the page so the dialog stands out”“the gray area I click to close the popup”

AnatomyOpen for part names

fill: Usually rgba(0,0,0,0.45)—too light fails hierarchy; too dark feels harsh.
click interception: Functional core, not only visual decoration.

How to write itOpen for stack patterns

Web (HTML/CSS)::backdrop

React + Tailwind + shadcn/uiDialog overlay / fixed inset-0 bg-black/45

SwiftUIColor.black.opacity in ZStack behind sheet

Ant Designmask / maskClosable

Notes

Scrim (Material), backdrop (W3C ::backdrop), and overlay are all used. It does two jobs: visual depth and click interception. Don't confuse with glassmorphism blur—scrim darkens; glass blurs what's behind a panel.

Common mistakesHumans and models trip here

Always closing on scrim click for multi-field forms: disable or confirm when there is unsaved work.
Scrim itself scrolls the page: use overscroll-behavior: contain.
Hand-rolled div fighting z-index wars: prefer native <dialog> ::backdrop in the top layer.

More failure symptoms on AI broke it.

Related vibesLooks often pair with

Glassmorphism iOS Human Interface Frutiger Aero Dark Mode Liquid Glass Windows Aero

Related patterns

Modal DialogA centered window that blocks the page until the user responds.Drawer / Side SheetA panel that slides in from an edge, usually over a scrim, for secondary tasks.Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.

Spotted a wrong name or missing pattern?

Message on X