Glass Card
Frosted background visible through
12px
0.25
180%
#ffffff
1px
0.3
30px
0.15
What is glassmorphism?
- Glassmorphism = semi-transparent background +
backdrop-filter: blur()to blur whatever is behind - Adds a thin highlight border for the glass-edge effect
- Slight outer shadow lifts the card off the surface for the floating look
- Works best over colorful or photographic backgrounds, not flat colors
Browser support
- Chrome / Edge 76+, Firefox 103+, Safari 9+ (with
-webkit-backdrop-filterprefix) - Older browsers fall back to a flat semi-transparent background — degradation is graceful
- Avoid stacking too many blurred layers — performance dips on low-end devices
- Watch readability: keep text contrast high and avoid placing on busy backgrounds