▢

Gerador de Glassmorphism

Crie CSS de cartão em vidro fosco com blur, transparência, saturação e cor de tonalidade.

Seus arquivos ficam neste dispositivo

Os arquivos são processados no navegador, nunca enviados. O site baixa o código e os recursos necessários. Sem contas ou rastreadores.

Use Baixar para salvar esta ferramenta em um único arquivo HTML para uso offline.

blur: 10px

transparência: 0.25

saturação: 180%

tonalidade

resultado

saída

Sobre esta ferramenta

Ajuste blur, transparência, saturação e tonalidade para criar um cartão de vidro fosco e copie seu CSS, tudo no seu navegador.

Por que a prévia fica sobre um gradiente?

O glassmorphism depende de um fundo colorido para que o blur e a transparência fiquem visíveis atrás do cartão.

O que o backdrop-filter faz?

Ele aplica blur e saturação ao que estiver atrás do elemento para produzir o efeito de vidro fosco.