Glassmorphism
You might say
Use translucent frosted-glass panels where you can faintly see the background through them.
Use translucent, blurred surfaces to separate layered contentGlassmorphism combines transparent color, backdrop blur, light borders, and layered backgrounds. It can make floating controls feel connected to the scene behind them. Readability depends on the background, so important text needs a stable surface and sufficient contrast.
Scroll sideways to explore the full example
After the rain
Arlo Parks · Softly
1:423:56
Design Principles
- Use translucency only where a real layer relationship exists
- Keep text contrast stable across changing backgrounds
- Pair blur with a visible tint and edge
- Limit the number of overlapping glass surfaces
- Provide a clear fallback when blur is unavailable
When to use it
- Media controls over imageryNow playing ▶
- Floating navigationFloating card
- A compact overlay or status panelLog in
- A visual product with controlled backgrounds
When NOT to use it
- Place body text on unpredictable transparent backgrounds
- Nest many blurred panels
- Use glass on every card and controlFull-screen blur can hurt scrolling and animation on lower-powered devices.
- Rely on blur alone to show boundariesInsufficient text contrast
Anatomy
Bright background+
Translucent background+
blur blur+
Semi-transparent white stroke=
Suspended soft shadow
There needs to be perceptible changes in light and shade or color behind the scene, and the blur should not interfere with the foreground.
Transparency adjusts by subject and contrast; no blur behind is visible at full opacity
The blur value is debugged according to component size and background complexity, and provides filter-free fallback.
Thin strokes can enhance material boundaries, and the color and intensity should match the light and dark theme.
Drop shadows can lift overlays from the background, but do not require the use of color or a fixed range
AI Prompt
Glassmorphism interface on a controlled vivid gradient, translucent cards, backdrop blur, 1px semi-transparent white borders, soft colored shadows, stable high-contrast text surfaces
Typical use cases
Media player
Scroll sideways to explore the full example
Floating navbar
Scroll sideways to explore the full example
Dashboard overlay
Scroll sideways to explore the full example
Visual landing page
Scroll sideways to explore the full example
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