CSS Glassmorphism em 2025: a forma correta de implementar

A maioria dos tutoriais online é de 2021. Veja o que mudou e o que você está fazendo errado.

9 min de leitura backdrop-filter WCAG 2.1

O glassmorphism explodiu em 2021 graças a um tutorial do Figma e ao redesign do macOS Big Sur. Quatro anos depois, o backdrop-filter atingiu 96 % de suporte global, mas os artigos que ranqueiam para a busca são os mesmos de sempre — desatualizados, cegos para performance e surdos para acessibilidade. Este guia preenche a lacuna.

backdrop-filter vs filter

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

WCAG

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Performance

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}
Ferramenta gratuita Verificador de Contraste Verifique a conformidade WCAG AA / AAA para qualquer par de cores

Progressive Fallback

.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

Dark Mode

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
Ferramenta gratuita Gerador Glassmorphism Crie cards de vidro com backdrop-filter, fallback @supports e pré-visualização

Quando NÃO usar glassmorphism

Abrir o gerador

Ferramenta gratuita Gerador Box Shadow Ajuste os parâmetros e copie o CSS pronto para produção

CSS Glassmorphism em 2025: suporte a navegadores, performance, acessibilidade

O glassmorphism CSS baseia-se na propriedade backdrop-filter, que atingiu suporte completo entre navegadores em 2023. Em 2025, o suporte global está em aproximadamente 96 %. O Firefox adicionou suporte na versão 103 (2022), eliminando a necessidade de polyfills JavaScript.

Perguntas frequentes

Qual é a diferença entre backdrop-filter e filter no CSS?+
backdrop-filter aplica efeitos à área atrás de um elemento sem afetar seu próprio conteúdo. filter atua no elemento em si. Para glassmorphism, sempre use backdrop-filter: filter: blur() no card desfoca o texto do card.
O Firefox suporta backdrop-filter em 2025?+
Sim. O Firefox adicionou suporte na versão 103 (julho de 2022). Em 2025, tem suporte completo no Chrome 76+, Firefox 103+, Safari 9+ (com prefixo -webkit-), Edge 17+.
Por que meu glass card fica ruim no mobile?+
Dois motivos comuns: performance — raios de blur altos (acima de 16–20 px) podem causar quedas de framerate em Android intermediário. Contraste — em telas mobile com alta luminosidade, um glass card com alpha baixo pode tornar o texto quase ilegível.
Como tornar o glassmorphism acessível?+
O principal problema é o contraste do texto. WCAG 2.1 AA exige 4.5:1. Soluções: adicionar text-shadow, dar ao texto um fundo semiopaco escuro, ou controlar o fundo atrás do card. Também respeitar prefers-reduced-motion.
Qual raio de blur usar para glassmorphism?+
O intervalo mais usado em produção é 8–16 px. Abaixo de 8 px, o efeito frost mal é visível. Acima de 20 px, é dramático mas caro. Para mobile, limitar a 10–12 px.
Como escrever um fallback para navegadores sem backdrop-filter?+
Usar a regra @supports com progressive enhancement: definir um fundo sólido e quase opaco como estilo base, depois sobrescrever com fundo translúcido e filtro blur dentro de @supports.
O glassmorphism ainda é relevante em 2025?+
Sim — amadureceu de tendência para padrão UI padrão em contextos específicos. Apple, Microsoft e Google usam efeitos de vidro fosco nas UIs do sistema operacional. O entusiasmo de 2021 deu lugar a um uso mais intencional.