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
You can say this to an AI Agent
Use a translucent surface and restrained backdrop blur for the sticky navigation, keeping text readable over every scrolled background. Fall back to a clear solid surface when unsupported or slow, and test low-end mobile, dark mode, and layered overlays.
When to use it
- Floating header over imageryNavigation · Frosted glass
- Compact overlay or control surfaceDialog · Frosted-glass overlay
- Glass-style panel with readable text
- Separate a layer without fully hiding the backgroundA translucent rgba background + blur: a natural pair.
When NOT to use it
- Place low-contrast text over unpredictable imagesA solid white background makes blur pointless.An opaque background means the frosted-glass effect cannot work.
- Apply strong blur to many nested surfacesA heavy blur covers the entire page.Heavy blur over a large area is both slow and hard to read.
- Rely on blur as the only boundaryWhen the background is too transparent and not blurred enough, the body text and background interfere with each other.Ensure text contrast and readability first.
- Ignore browsers or devices where the effect is limitedStacking several blur layers on mobile can hurt performance on lower-end devices.
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
⏮▶⏭
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check