Gerador de Glassmorphism CSS

Glassmorphism é uma tendência de design de UI que cria uma aparência de vidro fosco usando backdrop-filter CSS com desfoque combinado com uma cor de fundo semi-transparente. O desfoque faz com que o conteúdo atrás do elemento pareça suave e difuso enquanto a cor de fundo transparente adiciona uma tonalidade de cor. Popularizado pelo macOS Big Sur da Apple e pelo Fluent Design do Windows 11, o glassmorphism cria profundidade e hierarquia visual permitindo que os elementos de fundo apareçam parcialmente. As propriedades CSS principais são backdrop-filter: blur(), background: rgba() e, tipicamente, uma borda sutil para aprimorar a borda de vidro.

Backdrop-filter é suportado no Chrome 76 e posterior, Safari 9 e posterior (com prefixo -webkit), Edge 79 e posterior, Firefox 103 e posterior e todos os navegadores móveis modernos. Safari requer o prefixo -webkit-backdrop-filter, que este gerador inclui automaticamente. A única lacuna notável é versões mais antigas do Firefox anteriores a 103 e o Internet Explorer, que não possui suporte. Para navegadores não suportados, a cor de fundo semi-transparente ainda fornece um efeito de sobreposição colorida, apenas sem o desfoque. No geral, o suporte do navegador está acima de 95 por cento dos usuários globais a partir de 2026.

A propriedade CSS filter aplica efeitos visuais como desfoque ao próprio elemento e seus filhos. Backdrop-filter aplica os mesmos efeitos apenas à área atrás do elemento, deixando o conteúdo do elemento nítido e legível. É isso que cria o efeito glassmorphism: o texto no cartão de vidro permanece nítido enquanto o fundo atrás dele aparece desfocado. Se você usasse filter: blur() em vez disso, o texto dentro do cartão também ficaria desfocado e ilegível. Backdrop-filter essencialmente cria um efeito de janela onde você está olhando através de vidro fosco.

Glassmorphism eficaz precisa de um fundo colorido ou detalhado para tornar o desfoque visível. Um fundo branco sólido atrás do vidro parece idêntico a um cartão regular. Use valores de desfoque entre 8 e 20 pixels para a maioria dos casos. Mantenha a opacidade de fundo entre 10 e 30 por cento para que o conteúdo atrás permaneça parcialmente visível. Adicione uma borda de luz sutil em 10 a 30 por cento de opacidade branca para aprimorar a borda de vidro. Evite empilhar várias camadas de vidro, pois cada backdrop-filter aumenta o custo de desempenho. Certifique-se de que o contraste do texto atende aos padrões de acessibilidade, já que fundos semi-transparentes podem reduzir a legibilidade.