Backdrop Blur
You might say
Make the navigation bar translucent so the content behind it blurs as it scrolls past.
Blur the content behind a translucent surfaceBackdrop blur creates a frosted-glass effect by blurring what is behind a partly transparent element. It can separate a floating header or overlay while keeping context visible. Always provide enough background color and contrast, because blur support and source imagery vary.
Know first
When to use it
- Floating header over imagery
- Compact overlay or control surface
- Glass-style panel with readable text
- Separate a layer without fully hiding the background
When NOT to use it
- Place low-contrast text over unpredictable images
- Apply strong blur to many nested surfaces
- Rely on blur as the only boundary
- Ignore browsers or devices where the effect is limited
Anatomy
+blur(12px)+rgba white 55%=
What’s behind the elements: images, gradients, scrolling pages
The blur radius of backdrop-filter, the larger it is, the harder it is to see
Without it, blur will not take effect, and it can easily maintain the text contrast.
The final effect of the superposition of the three: vague and clear-cut
Variants
Light
Light glass
When the background is bright and text contrast can still be maintained
Dark
Dark glass
Dark basemap or night mode interface
Strong
Strong blur
There needs to be a stronger sense of isolation behind pop-up windows
Typical use cases
Floating navbar
Dali Ancient City after the rain
32,000 reads · 486 collections
One-day cycling route around Erhai Lake
18,000 reads · 302 collections
Travel Notes
Homepage
Destination
My
Media controls
Mountain Homestay · Genting
1,200 meters above sea level, open the window and see the sea of clouds
¥ 688 / night
Available to order
Overlay panel
Save changes before exiting?
"Home Page Revision v2" has unsaved changes
Glass card
Bucai · My Three Body
⏮▶⏭
Further reading