Gerador de Glassmorphism

Crie uma superfície de vidro fosco

O glassmorphism funciona deixando o fundo transparecer através de uma superfície translúcida enquanto um desfoque suaviza o que está atrás. O resultado pode parecer polido e moderno quando usado com moderação. Este gerador de glassmorphism dá-lhe controlo direto sobre os elementos importantes: tonalidade, transparência, desfoque do fundo, opacidade do contorno, raio e sombra. Ao ajustar os valores, o cartão atualiza-se sobre um gradiente colorido para que possa avaliar se o efeito de vidro é visível sem tornar o conteúdo difícil de ler.

O CSS gerado inclui background, backdrop-filter, a propriedade equivalente com prefixo WebKit, um contorno subtil, raio de contorno e sombra. Essas declarações bastam para um cartão reutilizável, painel de navegação, modal, sobreposição hero ou widget de painel. Como o efeito é puro CSS, não há imagens para exportar nem processamento em servidor. O navegador renderiza a pré-visualização e o botão de copiar escreve o texto CSS na sua área de transferência.

Equilibrar transparência e legibilidade

O erro mais comum no glassmorphism é tornar o cartão demasiado transparente. Uma opacidade baixa pode parecer impressionante numa pré-visualização vazia, mas títulos, etiquetas e ícones reais precisam de contraste suficiente para continuarem legíveis em qualquer fundo. Aumente a opacidade quando o fundo for complexo, diminua-a quando o fundo for simples e use o contorno para separar a superfície de cores semelhantes. O desfoque ajuda a reduzir o detalhe atrás do cartão, mas não substitui o teste de contraste.

Onde usar o efeito

O vidro fosco funciona melhor em momentos focados: um cartão de preços sobre um gradiente hero, uma barra de ferramentas flutuante, um resumo de perfil ou um modal sobre uma ilustração rica. Torna-se ruidoso quando todos os componentes o usam ao mesmo tempo. Depois de copiar o CSS, teste-o no layout real e adicione um fundo sólido de reserva se suportar navegadores antigos ou dispositivos de muito baixo consumo. Um bom cartão de vidro deve transmitir camadas mantendo a hierarquia da interface e o conteúdo claros.