glassmorphism fallback backdrop-filter navegador
`backdrop-filter` tem suporte nos principais navegadores desde 2021, mas duas armadilhas continuam comuns em produção: esquecer o prefixo `-webkit-` (obrigatório no Safari até hoje) e não pensar no que acontece visualmente para o pequeno percentual de usuários em navegadores sem suporte nenhum, que veem o elemento sem nenhum blur, só a cor de fundo semitransparente por cima do conteúdo.
O fallback (fora do @supports) usa um fundo quase opaco, o efeito de vidro só entra quando o navegador realmente suporta blur.
Alternativa mais direta: define o estado padrão como o efeito completo e só sobrescreve para o caso sem suporte.
O efeito só é visível quando há algo atrás do elemento para ser borrado, uma imagem, gradiente ou cor vibrante. Sobre um fundo liso e uniforme, o blur não tem o que desfocar e o resultado parece só uma cor sólida meio transparente. Use o preview desta ferramenta com um dos fundos vibrantes para conferir o efeito real.
Não, IE nunca implementou backdrop-filter e está fora de suporte desde 2022 na maioria dos contextos. O foco real de fallback hoje é garantir legibilidade em navegadores desktop mais antigos com Reduce Transparency ativado no sistema operacional, não IE.
Sim, é uma media feature relativamente nova. `@media (prefers-reduced-transparency: reduce)` permite substituir o glassmorphism por um fundo sólido para usuários que ativaram essa preferência de acessibilidade no sistema operacional, o suporte em navegadores ainda está em expansão, então trate como um extra, não como o único mecanismo de fallback.
backdrop-filter tem bom suporte nos navegadores modernos, mas sempre inclua o prefixo -webkit- para Safari e trate a ausência de suporte com um fundo sólido de fallback.
.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);
}O CSS é gerado localmente no navegador.