Glassmorphism
Frosted glass UI — semi-transparent panels with background blur, soft borders, and subtle shadows. Popularized by iOS and macOS.
Also called: frosted glass, glass UI
🪟
Translucent
Low-opacity background lets color bleed through.
🌫️
Blurred
backdrop-filter: blur() frosts what's behind.
✨
Bordered
A thin light border defines the glass edge.
How it works
Three ingredients: background: rgba(255,255,255,0.06), backdrop-filter: blur(20px), and border: 1px solid rgba(255,255,255,0.12).
- Needs a colorful/busy background behind it to look good
- Provide a fallback for browsers without backdrop-filter support