Gerador de Glassmorphism CSS
Crie um efeito de vidro (glassmorphism) com pré-visualização ao vivo — ajuste desfoque, transparência, tom e borda, depois copie o CSS.
668 visualizações
O Que É Glassmorphism?
Glassmorphism é o visual de vidro fosco: um painel semitransparente que desfoca o que está atrás usando backdrop-filter: blur(), combinado com uma borda sutil e sombra. Funciona melhor sobre fundos coloridos ou imagens — em um fundo liso o desfoque fica invisível.
Mova os controles deslizantes e veja a pré-visualização ao vivo; o CSS abaixo é atualizado instantaneamente e já está pronto para copiar. Não esqueça o prefixo -webkit-backdrop-filter para o Safari, já incluído no código gerado.
Perguntas Frequentes
Por que meu efeito de vidro parece plano?
backdrop-filter só aparece sobre um fundo variado — coloque o elemento sobre um gradiente ou imagem. Verifique também o suporte do navegador: o Safari precisa do prefixo -webkit- (incluído no código gerado).
O backdrop-filter prejudica a performance?
O desfoque é acelerado por GPU, mas não é gratuito. Use em algumas superfícies-chave (cards, cabeçalhos) em vez de dezenas de elementos, e mantenha o raio de desfoque moderado em dispositivos móveis.
Quais valores criam um visual de vidro clássico?
Um bom ponto de partida: fundo branco com 15-25% de opacidade, desfoque de 8-12px, borda de 1px com 30% de branco e raio de 16px — os padrões deste gerador.
Ferramentas Semelhantes
Reportar um Problema
Gerador de Glassmorphism CSS