Gerador de Glassmorphism
O gerador de glassmorphism cria o efeito de vidro fosco com CSS backdrop-filter e permite ajustar desfoque, opacidade do fundo, saturação, opacidade da borda, raio e cor do tom com prévia ao vivo.
Sobre esta ferramenta
O gerador de glassmorphism cria o efeito de vidro fosco com CSS backdrop-filter e permite ajustar desfoque, opacidade do fundo, saturação, opacidade da borda, raio e cor do tom com prévia ao vivo.
Como usar
- Escolha a cor do tom do vidro.
- Ajuste o desfoque, a opacidade e a saturação.
- Defina a opacidade da borda e o border-radius.
- Clique em Copiar CSS.
Bom saber
- O efeito usa backdrop-filter: blur() saturate(), que desfoca tudo o que está atrás do elemento.
- É preciso um fundo semitransparente (rgba); caso contrário, o desfoque fica escondido.
- O CSS gerado inclui o prefixo -webkit-backdrop-filter para o Safari.
- O efeito vidro funciona melhor sobre fundos coloridos ou com imagens; sobre cores chapadas o desfoque não aparece.
- Fique de olho no contraste do texto: painéis translúcidos podem ficar abaixo do contraste WCAG sobre fundos carregados.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como fazer um efeito de vidro em CSS?
Dê ao elemento um fundo semitransparente, como rgba(255,255,255,0.15), e backdrop-filter: blur(12px); esta ferramenta escreve a regra completa.
Por que meu backdrop-filter não funciona?
O elemento precisa de um fundo transparente ou semitransparente, e é preciso haver algo atrás dele para desfocar. O Safari também exige o prefixo -webkit-.
Glassmorphism é acessível?
Pode ser, desde que o texto mantenha contraste suficiente. Teste as cores do texto sobre a parte mais carregada do fundo.
O backdrop-filter prejudica o desempenho?
O desfoque exige bastante da GPU, então evite aplicá-lo em áreas muito grandes ou em muitos elementos ao mesmo tempo, principalmente em celulares mais simples.