How to Use Glassmorphism CSS
Glassmorphism works by blurring and tinting whatever is behind the element, creating a frosted-glass depth effect. A few rules make or break the look.
backdrop-filter vs filter
backdrop-filter: blur() blurs the content behind the element — this is real glassmorphism. filter: blur() blurs the element itself. Always use backdrop-filter.
Why isn't the blur showing?
The parent must not have overflow: hidden or isolation: isolate blocking the backdrop. Also ensure there's actual content behind the glass card, not a solid color.
Safari / iOS Support
Always include -webkit-backdrop-filter alongside backdrop-filter. Safari has supported this since 2015 but needs the prefix. Firefox added support in v103.
Performance Tips
Keep blur under 20px for mobile. Large blur radii are GPU-intensive. Avoid using glassmorphism on more than 3–4 elements per screen simultaneously.
Accessibility
Text on glass must meet WCAG AA contrast. Use text-shadow or increase the tint opacity if text becomes hard to read against varied backgrounds.
Tailwind v3+
Use backdrop-blur-md, bg-white/10, and border-white/20 utility classes. Enable backdropFilter in tailwind.config.js if not using JIT.