Gerador de Glassmorphism
Crie painéis de vidro fosco: desfoque, transparência, bordas de luz e sombras suaves — com cenas coloridas ao vivo atrás do vidro.
Nota: backdrop-filter requer o prefixo -webkit- para Safari — está incluído na saída.
Como usar o gerador de Glassmorphism
- Escolha uma cor de tonalidade e ajuste a transparência do painel — valores menores parecem mais «vitreos».
- Aumente o desfoque para fosquear o fundo; adicione saturação para fazer as cores atrás do vidro saltarem.
- Adicione uma borda clara sutil (branco semitransparente) para simular o brilho da borda do vidro.
- Ajuste a sombra suave e o raio dos cantos para finalizar o efeito flutuante.
- Troque a cena de fundo para testar a legibilidade, depois copie o código CSS ou Tailwind.
Sobre este gerador de Glassmorphism
Glassmorphism é um estilo de UI onde os painéis parecem vidro fosco: fundo semitransparente, desfoque do fundo, borda clara sutil e sombra suave. Tornou-se uma tendência de design mainstream para cartões, barras de navegação e modais. O ingrediente mágico é a propriedade backdrop-filter, que aplica efeitos ao que está atrás do elemento.
Este gerador permite ajustar cada ingrediente — tonalidade, transparência, desfoque, saturação, borda de luz, raio e sombra — sobre três cenas coloridas de teste para julgar o efeito com realismo. A saída inclui o prefixo -webkit-backdrop-filter para Safari. Por acessibilidade, verifique sempre que o texto sobre o vidro mantenha contraste suficiente sobre fundos movimentados.
FAQ de Glassmorphism
Quais navegadores suportam backdrop-filter?
backdrop-filter é suportado por todos os navegadores modernos. Chrome e Edge suportam sem prefixo; Safari requer o prefixo -webkit-, que o gerador inclui automaticamente. Em navegadores muito antigos o painel simplesmente recorre ao seu fundo semitransparente, que ainda parece aceitável.
Por que meu efeito de vidro não está aparecendo?
backdrop-filter só funciona quando há algo atrás do elemento — uma imagem de fundo, gradiente ou outro conteúdo. Se o elemento está sobre um fundo plano e sólido, o desfoque não tem nada para desfocar. Certifique-se também de que o fundo do painel tenha transparência (alfa abaixo de 100%), caso contrário o fundo fica totalmente coberto.
Para que serve a função saturate()?
saturate() intensifica (acima de 100%) ou suaviza (abaixo de 100%) as cores do fundo antes do desfoque. Valores em torno de 130–180% tornam as cores atrás do vidro vivas e ajudam o efeito fosco a se ler claramente — uma parte característica do visual glassmorphism.
Glassmorphism é ruim para acessibilidade?
Pode ser, se o texto ficar sobre fundos muito desfocados e de baixo contraste. Mantenha a transparência moderada, use a borda de luz para definir as bordas e teste seu painel sobre o fundo mais movimentado que ele cobrirá. As três cenas embutidas ajudam a verificar o contraste antes de publicar.
Posso combinar glassmorphism com Tailwind?
Sim. A aba Tailwind emite classes de valor arbitrário (bg-[rgba(...)], backdrop-blur-[12px], etc.) que funcionam com Tailwind CSS v3+ sem configuração.