Gerador de glassmorphism CSS

O que é Gerador de glassmorphism CSS?

O gerador de glassmorphism CSS é um editor visual gratuito do estilo de interface em vidro fosco (glassmorphism), feito para desenvolvedores front-end e designers de produto. Ajuste a intensidade do desfoque, a transparência da superfície, a saturação da cor, a espessura da borda, o raio dos cantos e a força da sombra com campos numéricos e controles deslizantes, e então escolha uma cor de tom com a amostra. Um painel de pré-visualização mostra o painel de vidro sobre um fundo gradiente vibrante em tempo real, e o CSS completo — usando backdrop-filter, um fundo semitransparente, uma borda sutil e um box-shadow — é gerado para você copiar. Use-o para criar cartões, barras de navegação, modais e sobreposições de vidro sem ajustar o alfa rgba na mão nem lembrar do prefixo -webkit-backdrop-filter.

Como usar Gerador de glassmorphism CSS

1. Defina o Desfoque (em px) para controlar o quanto a área atrás do painel fica fosca.
2. Diminua a Transparência para deixar o vidro mais translúcido, ou aumente-a para uma superfície mais sólida.
3. Aumente a Saturação acima de 100% para fazer as cores do fundo se destacarem através do vidro.
4. Escolha uma cor de tom com a amostra e ajuste a largura da Borda, o Raio e a Sombra para finalizar o visual.
5. Veja a pré-visualização se atualizar sobre o fundo em tempo real conforme você altera cada valor.
6. Copie o CSS gerado para a sua folha de estilos — ele já inclui o fallback -webkit-backdrop-filter.

Exemplos

desfoque 12, transparência 25%, saturação 120%, raio 16, borda 1, sombra 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

desfoque 8, transparência 60%, saturação 100%, raio 0, borda 1, sombra 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

tom #0f172a, desfoque 20, transparência 30%, saturação 140%, raio 24, sombra 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Perguntas frequentes

O que o backdrop-filter faz?

O backdrop-filter aplica efeitos gráficos — aqui desfoque e saturação — a tudo o que está atrás do elemento, e é isso que cria a aparência de vidro fosco. O gerador produz tanto o backdrop-filter quanto o prefixo -webkit-backdrop-filter para que funcione em vários navegadores, além de um fundo semitransparente, uma borda e uma sombra.

Por que existe um controle de transparência?

O efeito de vidro precisa de um fundo parcialmente translúcido para que o fundo desfocado apareça. O controle deslizante de Transparência define o alfa da cor de fundo do painel (rgba): valores mais baixos são mais transparentes, valores mais altos são mais opacos e sólidos.

Posso usar um vidro colorido ou escuro?

Sim. Escolha qualquer cor de tom com a amostra — a ferramenta a mistura no fundo rgba, então você pode criar vidro quente, frio ou escuro. Combine um tom escuro com transparência mais alta para sobreposições sóbrias, ou mantenha branco para um painel fosco clássico.

Vai funcionar em todos os navegadores?

A maioria dos navegadores modernos suporta backdrop-filter. O CSS gerado inclui o prefixo -webkit-backdrop-filter para Safari e Chromium mais antigos, mas navegadores muito antigos o ignoram e simplesmente exibem o fundo semitransparente sem o desfoque.

Meus dados são enviados para algum lugar?

Não. O gerador roda inteiramente no seu navegador com JavaScript — suas cores e valores nunca são enviados a um servidor, então ele funciona de forma privada e até offline depois que a página é carregada.