Gerador de Glassmorphism

Guia de Glassmorphism

Glassmorphism é um estilo de design de UI com efeitos de vidro fosco: camadas semitransparentes, desfoque de fundo e bordas sutis que deixam as cores do fundo brilhar. Popularizado pela Apple e pela Microsoft, hoje é uma técnica padrão no design de interfaces moderno.

Ajuste o raio do desfoque, a transparência do branco, a largura da borda e o raio dos cantos para criar seu cartão de vidro. A prévia mostra um painel fosco realista sobre um fundo colorido, e o CSS gerado inclui o prefixo -webkit- para compatibilidade com o Safari.

Pro Tips

• Efeitos de vidro precisam de um fundo colorido para aparecer. Em fundos brancos ou pretos chapados, o glassmorphism perde profundidade — combine sempre com gradientes vibrantes.
• Mantenha a transparência entre 10% e 30%. Opacidade mais alta transforma o vidro em um cartão branco sólido e mata o efeito.
• Use painéis de vidro em barras laterais, barras de navegação e modais — não em parágrafos longos. Superfícies foscas funcionam melhor como contêineres de rótulos curtos, ícones e botões.