Gerador de Glassmorphism

Sobre Gerador de Glassmorphism

O Gerador de Glassmorfismo cria o efeito de cartão de vidro fosco: um painel translúcido que desfoca tudo que estiver atrás dele. Controles deslizantes ajustam o desfoque e a saturação do backdrop-filter, a cor e transparência do tom do vidro, a cor e opacidade da borda, o raio dos cantos e uma sombra externa — cada mudança é renderizada ao vivo sobre um fundo vívido para que você avalie o efeito de forma realista.

Quatro predefinições de qualidade — subtle, frosted, vivid e dark glass — oferecem combinações comprovadas para começar. A predefinição dark mostra como a mesma receita se adapta a interfaces escuras, onde uma borda de luz sutil faz a maior parte do trabalho de separar o vidro do fundo.

O CSS gerado inclui tanto backdrop-filter quanto o prefixo -webkit-backdrop-filter que o Safari exige. Note a ressalva de compatibilidade: navegadores mais antigos (por exemplo, Firefox anterior à versão 103) não suportam backdrop-filter, então forneça um fundo sólido de reserva para eles.

Como usar Gerador de Glassmorphism

1. Comece por uma predefinição — subtle, frosted, vivid ou dark glass — ou pelos padrões.
2. Ajuste o desfoque e a saturação do filtro de fundo.
3. Defina a cor do tom do vidro e sua transparência.
4. Ajuste a cor da borda, a opacidade da borda, o raio dos cantos e a sombra de contorno.
5. Copie o CSS — ele já inclui a propriedade com prefixo -webkit- para o Safari.

Perguntas frequentes