O que é glassmorphism?

Um estilo visual em que um painel translúcido desfoca o que está atrás dele, como vidro fosco, geralmente com uma borda clara e fina e uma sombra suave. Em CSS, ele combina um fundo semitransparente com backdrop-filter: blur().

Por que meu painel de vidro não fica desfocado?

backdrop-filter afeta apenas o conteúdo atrás do elemento, então o elemento precisa de um fundo transparente ou semitransparente e de algo visível atrás dele. Um fundo totalmente opaco esconde o efeito.

Quais navegadores suportam backdrop-filter?

As versões atuais do Chrome, Edge, Firefox e Safari suportam. Versões do Safari anteriores à 18 precisam do prefixo -webkit-, que o CSS exportado inclui.

Gerador de Glassmorphism

Crie painéis de vidro fosco com backdrop-filter. Ajuste desfoque, transparência, saturação e borda sobre um fundo real e copie o CSS.

Prévia em tempo real

Vidro fosco

O texto sobre o vidro precisa de contraste suficiente em todas as partes do fundo.

O fundo serve apenas para a prévia e não é exportado.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Tudo permanece no seu navegador.

Referências de formatos

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Página da ferramenta atualizada: 2026-10-25

Prévia em tempo real

Guia e exemplo

Ferramentas relacionadas

Referências de formatos