Ferramentas.

Gerador de glassmorphism

Crie o efeito de vidro fosco com backdrop-filter e copie o CSS.

Saldo disponível

R$ 12.480,00

•••• 482110/29
CSS
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
Tailwind
bg-[rgba(255,255,255,0.18)] backdrop-blur-[14px] backdrop-saturate-[1.6] border border-[rgba(255,255,255,0.3)] rounded-[20px]
Fundo da prévia
Cor do vidro
Espaço para anúncio

Dicas de uso

  • Use sobre fundos com cores ou imagens; o efeito some sobre fundos lisos.
  • Garanta contraste suficiente do texto sobre o vidro. Teste no verificador de contraste.
  • Desfoque é pesado para a GPU: evite muitos elementos com vidro ao mesmo tempo em celulares simples.

Perguntas frequentes

Como funciona o efeito de vidro no CSS?

A propriedade backdrop-filter aplica desfoque (e saturação) no que está atrás do elemento. Combinada com um fundo semitransparente e uma borda clara, ela cria a aparência de vidro fosco.

Funciona em todos os navegadores?

Sim, em todos os navegadores modernos. O Safari ainda precisa do prefixo -webkit-backdrop-filter, que já vem no código gerado.

Por que o efeito não aparece no meu site?

O vidro só aparece se houver algo colorido atrás do elemento. Sobre um fundo liso, o desfoque não tem o que borrar. Confira também se nenhum elemento pai tem overflow ou opacidade que atrapalhe.