Como criar um efeito glassmorphism em CSS
Publicado em 15 de setembro de 2026 · 2 min de leitura
O visual de vidro fosco "glassmorphism" — um painel translúcido e desfocado flutuando sobre um fundo colorido — se resume a uma combinação específica de opacidade de fundo, desfoque backdrop-filter, e uma borda sutil. Esta ferramenta permite que você ajuste os três com uma pré-visualização ao vivo.
Experimentar Gerador de GlassmorphismPassos
- 1
Abra o Gerador de Glassmorphism
Acesse o gerador de glassmorphism.
- 2
Defina a tonalidade e opacidade
Escolha a cor base do painel de vidro e quão transparente deve ser.
- 3
Ajuste o desfoque e saturação
Defina a força do desfoque de fundo e um impulso de saturação para aquele visual vívido de vidro fosco.
- 4
Copie o CSS
Cole as regras geradas de background, backdrop-filter e border na sua folha de estilos.
Perguntas frequentes
O desfoque de fundo só tem um efeito visível quando há algo atrás do elemento para desfocar — um fundo sólido simples não mostrará o efeito de vidro, então a pré-visualização ao vivo usa um gradiente colorido para demonstrá-lo adequadamente.
É suportado em todos os navegadores modernos; versões de navegador muito antigas podem não renderizar o desfoque, embora o fundo semitransparente sozinho ainda forneça um visual de fallback razoável.
Sim — a opacidade da borda é ajustável junto com desfoque, tonalidade e saturação, já que uma borda de luz sutil é parte do que vende o visual de vidro.
Como a pré-visualização renderiza o CSS real ao vivo, você pode ajustar finamente o efeito até que fique certo antes de copiar uma única linha de código.