Gerador de Glassmorphism

Glassmorphism é uma tendência moderna de design de UI que cria uma aparência de vidro fosco combinando um fundo semitransparente, um filtro de desfoque de fundo, uma borda sutil e às vezes uma sombra suave. Dá aos elementos uma aparência em camadas e rica em profundidade, popular em landing pages, dashboards e cartões.

A propriedade CSS backdrop-filter aplica efeitos gráficos, como desfoque, à área atrás de um elemento. Quando combinada com um fundo semitransparente, produz o efeito de vidro fosco. O prefixo -webkit-backdrop-filter é necessário para suporte completo ao Safari.

O backdrop-filter é suportado em todos os navegadores modernos: Chrome, Edge, Firefox (v103+), Safari e Opera. O prefixo -webkit- cobre versões mais antigas do Safari. O Internet Explorer não suporta esta propriedade. O CSS gerado inclui a versão padrão e a versão com prefixo para máxima compatibilidade.

Um valor de desfoque entre 8px e 20px geralmente produz o melhor aspecto de vidro fosco. Valores abaixo de 4px parecem muito nítidos, enquanto valores acima de 30px podem parecer excessivamente desfocados. O valor ideal depende da complexidade do fundo — fundos altamente detalhados se beneficiam de valores de desfoque mais altos.

O glassmorphism requer um fundo colorido ou complexo para ser visível. Se o fundo atrás do cartão for branco simples ou uma única cor sólida, o desfoque e a transparência não têm conteúdo visível para misturar. Use as opções de gradiente ou imagem de fundo para adicionar um fundo colorido à pré-visualização.

Copie o código CSS usando o botão Copiar CSS e cole-o em sua folha de estilos. Aplique a classe .glass-card ao seu elemento HTML. Certifique-se de que o contêiner pai tenha um fundo colorido ou imagem de fundo posicionada atrás do cartão de vidro para que o efeito apareça corretamente.

A opacidade do vidro controla quão transparente é o próprio fundo do cartão — valores menores permitem que mais do fundo apareça através. A opacidade da borda controla independentemente a visibilidade do destaque da borda do cartão, que geralmente é uma linha branca semitransparente que dá à borda do vidro um brilho realista.

Sim! Ative o toggle de Gradiente de Fundo nas configurações de vidro. Você pode então escolher duas cores e um ângulo para criar um fundo de gradiente linear para o cartão de vidro. O controle deslizante de opacidade é aplicado a ambas as paradas do gradiente, mantendo a transparência do vidro fosco.

A ferramenta inclui seis predefinições: Vidro Claro (vidro fosco branco clássico), Vidro Escuro (painel semitransparente escuro), Fosco (desfoque intenso, alta opacidade), Colorido (vidro gradiente roxo-rosa), Mínimo (camada de vidro quase invisível) e Vibrante (vidro ciano-azul-esverdeado sobre um fundo ousado).

Mude o toggle de Cena de Fundo para URL da Imagem e cole um link direto para uma imagem. A pré-visualização exibirá sua imagem como o fundo atrás do cartão de vidro. URLs de imagens publicamente acessíveis funcionam melhor.

O backdrop-filter pode ser intensivo para a GPU, especialmente com valores de desfoque altos ou muitos elementos de vidro na mesma página. Para desempenho, mantenha valores de desfoque razoáveis (abaixo de 20px), evite empilhar muitas camadas de vidro e teste em dispositivos de menor potência.

Com certeza. O glassmorphism funciona bem em botões, barras de navegação, barras laterais, modais, dicas de ferramentas e qualquer elemento de UI flutuante. Mantenha o raio da borda adequado para o tipo de elemento e garanta contraste de cor suficiente entre o texto e o fundo de vidro para legibilidade.