Styles
Glassmorphism
styleblurtranslucentdark modedepth
Translucent frosted-glass surfaces with blur, creating a layered, depth-rich aesthetic.
When to use
- Dark-mode UIs where you want depth without heavy shadows
- Overlay panels (modals, sidebars, tooltips) on rich backgrounds
- macOS-style or visionOS-style design systems
Examples
- macOS Monterey System Preferences
- Linear's command palette overlay
See this in the wild
Analyze a site and look for glassmorphism in the breakdown.
