glassmorphism fallback backdrop-filter browser support
`backdrop-filter` has been supported in major browsers since 2021, but two pitfalls remain common in production: forgetting the `-webkit-` prefix (still required on Safari today) and not thinking through what happens visually for the small percentage of users on browsers with no support at all, who see the element with no blur, just the semi-transparent background color over the content.
The fallback (outside @supports) uses a nearly opaque background, the glass effect only kicks in when the browser truly supports blur.
A more direct alternative: sets the default state as the full effect and only overrides it for the unsupported case.
The effect is only visible when there's something behind the element to blur, an image, gradient or vivid color. Over a flat, uniform background, blur has nothing to work with and the result reads as just a semi-transparent solid color. Use this tool's preview with one of the vivid backgrounds to see the real effect.
No, IE never implemented backdrop-filter and is out of support since 2022 in most contexts. The real fallback focus today is guaranteeing legibility on older desktop browsers, or with system-level Reduce Transparency enabled, not IE.
Yes, it is a relatively new media feature. `@media (prefers-reduced-transparency: reduce)` lets you swap glassmorphism for a solid background for users who enabled that accessibility preference at the OS level, browser support is still expanding, so treat it as a bonus, not the only fallback mechanism.
backdrop-filter has good support in modern browsers, but always include the -webkit- prefix for Safari and handle missing support with a solid fallback background.
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}CSS is generated locally in your browser.