95 Frosted Scrim. 95 of 95.
95/VISUAL DESIGN/95 of 95
Frosted Scrim
Blur plus a light tint beats a flat dark overlay.
The problem
A 40% black overlay dims the page into a flat slab — content disappears into mud with no sense of depth behind the dialog.
The solution
Backdrop blur with a 10–15% tinted gradient keeps depth and a glass-like finish.
Experiment
Play with the values
16px
12
40
How it works
- Content behind the dialog stays visible, which is what makes the scrim feel like glass.
- backdrop-filter blurs that content instead of covering it with a flat fill.
- A light tint, about 10–15% black, gives the blur something to sit in.
- A soft gradient can add depth without turning the overlay opaque.
- The dialog sits on glass rather than on a muddy dark plate.
Seen in
Modal dialogs
Confirmations and forms float over a frosted page instead of a flat dimmer.
Image lightboxes
Galleries keep scene context soft behind the focused photo.
Sheet / drawer backdrops
Mobile sheets frost the app shell without crushing contrast into gray.
Command palettes
Quick-open UIs sit on glass so the workspace still reads underneath.