Glassmorphism
also known asfrosted glass UI · glass UI · translucent panes
A surface treatment that uses background blur and translucency to make UI panes look like frosted glass.
Glassmorphism describes UI surfaces that are semi-transparent with a heavy backdrop-filter blur applied behind them, creating the illusion of frosted glass floating over a colorful background. The aesthetic relies on three things: a translucent fill (rgba or oklch with alpha), a CSS backdrop-filter blur of 12–32px, and a colorful or gradient backdrop for the glass to refract.
Apple revived the look with macOS Big Sur (2020) and iOS 7 before that. It's now ubiquitous in modern dashboards, music apps, and any product wanting a 'premium' feel. The trade-off is performance — backdrop-filter is expensive and can drop frame rates on weaker devices.
Reintroduced to mainstream UI by Apple's iOS 7 (2013) and macOS Big Sur (2020). The term 'glassmorphism' was coined in 2020 by designer Michał Malewicz.
- Dashboards over wallpaper or vibrant backgrounds
- Modal overlays that should feel weightless
- Music, photo, and creative apps
- Text-heavy reading interfaces (contrast suffers)
- Performance-critical mobile apps
- Backgrounds that are flat or near-white (no refraction = no glass)
- +Always pair glass with a colorful backdrop — gradient mesh, photo, or saturation boost
- +Add a 1px white-alpha border for the 'edge of glass' highlight
- +Use backdrop-saturate(180%) alongside blur for depth
- −Don't use glass on flat backgrounds — it just looks like a transparent box
- −Don't stack more than two glass layers — performance and clarity collapse
- −Don't put long-form text inside a glass pane
Apply glassmorphism to all card surfaces: rgba(255,255,255,0.62) background, backdrop-filter blur(20px) saturate(180%), 1px rgba(255,255,255,0.2) border, soft outer shadow. Place over a soft pastel mesh gradient backdrop.
Paste into Claude Code, Cursor, or Lovable to apply glassmorphism to your project.
Textbook examples in the directory
Extreme glassmorphism. Translucent panes float on a vivid aurora mesh — ultramarine, magenta, and mint cyan, blurred to 40px with 200% saturation. Every surface — cards, CTAs, even the primary button — is frosted glass. Nothing is opaque.
Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy.
A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.
People also ask
Glassmorphism vs neumorphism — what's the difference?
Glassmorphism uses transparency and backdrop blur to fake frosted glass over a colorful background. Neumorphism uses subtle inner and outer shadows on a single solid color to fake extruded plastic. Glass needs a colorful backdrop; neumorphism doesn't.
Is glassmorphism bad for accessibility?
It can be. Background blur reduces text contrast unpredictably depending on what's behind the glass. If you use it for text containers, increase font weight and run a contrast check against the worst-case backdrop.
What's the CSS for glassmorphism?
Three properties: `background: rgba(255,255,255,0.6)`, `backdrop-filter: blur(20px) saturate(180%)`, and `border: 1px solid rgba(255,255,255,0.2)`. Plus a colorful backdrop behind it.