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.
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 imagery
- Floating navigation
- A compact overlay or status panel
- 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 control
- Rely on blur alone to show boundaries
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
Floating navbar
Dashboard overlay
Visual landing page
Further reading