Gerador de CSS para efeito de vidro em alta resolução

(glass3d.dev)

5 pontos por GN⁺ 2025-07-04 | 1 comentários | Compartilhar no WhatsApp

Fornece uma forma de implementar o efeito de vidro em alta resolução com código CSS
Aplica filtros visuais como blur, brightness e saturate, além de sombras em múltiplas camadas
Usa pseudo-elements para criar efeitos de camada frontal e traseira e aplicar textura
Pode ser aplicado e customizado em várias UIs com apenas uma classe CSS concisa
É vantajoso para introduzir um efeito de vidro em alta resolução de forma rápida e moderna em projetos web

Introdução

Este código CSS é especializado em criar um efeito de vidro em alta resolução em interfaces web. Em comparação com o efeito glassmorphism tradicional, ele permite uma apresentação mais detalhada e com maior sensação de profundidade, e o resultado pode ser visto de forma intuitiva aplicando apenas uma única classe CSS.

Principais pontos

A classe .glass3d aplica vários efeitos de filtro visual, como blur(32px), brightness(0.85) e saturate(2.5), além de inserir cor e textura de ruído
A composição de box-shadow em múltiplas etapas recria a sensação de vidro com volume realista
No pseudo-elemento ::before, backdrop-filter, cor e imagem de fundo com ruído são sobrepostos para produzir transparência de fundo e textura tridimensional
No pseudo-elemento ::after, uma sombra interna (inset) é adicionada para dar a impressão de luz refletindo na superfície real do vidro
A separação com z-index organiza as camadas para que os efeitos não entrem em conflito e sejam exibidos corretamente
Com o seletor .glass3d > *, o conteúdo dos elementos filhos é mantido sempre no topo

Contexto de uso e vantagens

Sem bibliotecas ou dependências externas, é possível implementar uma UI moderna e alinhada às tendências com efeito de vidro usando apenas uma única classe CSS
Pode ser aplicado e expandido facilmente em sistemas de design de UI, cards, pop-ups e botões, sendo muito útil para desenvolvedores front-end web
Com textura baseada em imagens de padrão real, várias combinações de cores e efeitos de sombra em múltiplas etapas, ele se destaca em profundidade e contraste em relação às técnicas convencionais de glassmorphism

1 comentários

GN⁺ 2025-07-04

Opiniões no Hacker News

Recomendo conferir uma versão que aplica um efeito real de refração aos elementos da página com JavaScript https://real-glass.vercel.app/
Esse efeito tem a limitação de desfocar apenas os pixels logo atrás da superfície; recomendo o texto do Josh Comeau que explica bem esse fenômeno (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) e a discussão no Hacker News (https://news.ycombinator.com/item?id=42302907); é uma questão bem importante se o fundo estiver se movendo, mas normalmente não importa tanto se ele estiver fixo
- Li o ótimo artigo do Josh e tentei implementar seguindo o tutorial, mas encontrei problemas ao aplicar border-radius com máscara SVG; funcionou bem em elementos hardcoded, mas ainda estou pensando em como usar isso numa biblioteca inteira de componentes, em que o border-radius muda conforme a marca ou as container queries
- A solução do Josh intuitivamente também parece ter algo errado; ela parte do pressuposto de que os elementos ao redor são um material que emite luz, mas não acho que essa seja uma propriedade física básica do “material” na web; para mim, por padrão, material se parece mais com papel
Parece ter sido muito bem feito, mas sem o efeito de refração do vidro desaparece a forte sensação de separação visual em camadas do Liquid Glass; olhando os recursos de design do Material, eles enfatizam que o app deve ser composto por camadas 3D consistentes e em movimento, mas quando isso é implementado na prática em 2D e todos os elementos acabam se misturando, fica muito difícil distinguir cada camada; muitas vezes as pessoas não conseguem encontrar botões de ação em cantos mais escondidos; o movimento ajuda a separar o chrome do conteúdo, mas visualmente não se destaca muito; acho que a maior vantagem do Liquid Glass é a distorção nas bordas (edge distortion), porque ela cria um movimento não linear que o olho humano percebe imediatamente quando o conteúdo se move; com movimento, a separação entre camadas fica mais evidente; esse elemento importante de refração está ausente aqui; implementar edge distortion com filtro SVG não é fácil e, no fim, é um trabalho bastante complexo; dá para ter noção da complexidade pela explicação passo a passo em https://atlaspuplabs.com/blog/liquid-glass-but-in-css/…; também encontrei uma coleção CodePen Spark com várias tentativas de implementar Liquid Glass, e recomendo junto uma referência bem feita com SVG hardcoded https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM
- Acho que a Apple criou um fosso competitivo inteligente com o Liquid Glass; qualquer um consegue fazer uma versão barata facilmente, mas é muito difícil fazer algo que realmente pareça autêntico; vemos vidro de verdade todos os dias, então conseguimos distinguir intuitivamente o “real vs falso”; por isso, imitações ficam evidentes e a Apple consegue preservar a sensação de “premium”
- Acho a edge distortion do Liquid Glass realmente incrível, então pretendo recriá-la algum dia; meu projeto atual foca em refinar os detalhes, cuidar da compatibilidade entre navegadores e implementar materiais sem usar 3D real; e concordo que o efeito se destaca mais quando as camadas se movem sobre um fundo fixo; o site de demonstração que estou desenvolvendo atualmente já tem esse efeito, embora ainda não esteja pronto; obrigado por compartilhar bons materiais
- Concordo com a opinião de que a refração do vidro cria essa separação visual em camadas; mas pessoalmente acho o efeito de refração dispersivo demais e, em alguns contextos, visualmente desagradável; é um fenômeno físico real do vidro, mas não acho que seja necessariamente indispensável; parece uma ampliação de um dos elementos que eu menos gostava no skeuomorphism; para referência, eu preferia os designs anteriores ao iOS 7
O efeito em si é legal, mas não me passa muito uma sensação de vidro; a diferença mais imediata é que a luz não reage em nada ao bevel (curvatura da borda); eu esperaria também que a luz refletida no vidro influenciasse a iluminação e as cores; só com efeito de blur isso fica difícil; além disso, o vidro pode criar sombras bem características, especialmente caustics, e parece que nem a Apple foi tão longe nisso; no momento, a sombra parece mais um simples drop shadow, reforçando mais a sensação de cartão plano do que de objeto 3D; isso foge do cerne da tendência recente; esse tipo de efeito é difícil de implementar só com CSS, e talvez faça mais sentido rodar isso como shader na GPU
- Se não dá para fazer com CSS, fico curioso sobre qual seria a alternativa; também tenho dúvidas se dá para aplicar efeito de shader de GPU a uma div comum; se não for possível colocar efeitos de GPU diretamente em HTML básico, talvez no fim seja melhor criar um novo motor de renderização com algo como um canvas customizado; o HTML já perdeu o sentido e agora só sobra a tag <p> para texto enquanto todo o resto virou anúncio; talvez fosse melhor recomeçar do zero, deixar só o <p> e melhorar a integração com GPU
Estou colecionando exemplos desse tipo de design https://github.com/swyxio/spark-joy
Também recomendo alguns materiais relacionados
- https://ui.glass/generator/ : gerador gratuito de CSS no estilo glassmorphism
- frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
- exemplos de pen de glassmorphism codepen, em contexto
- exemplo de CSS com efeito de blur + rotação
```
.blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
```
- Obrigado por adicionar este projeto à lista spark-joy
- Acho o Spark Joy um recurso muito legal
- Encontrei um gerador de fonte ASCII que aparentemente não está no spark-joy; em vez disso, recomendo uma ferramenta que uso com frequência https://patorjk.com/software/taag/…
Acho que a usabilidade no mobile seria muito melhor se houvesse uma opção para esconder ou recolher as caixas; como elas ocupam a tela inteira, fica difícil ver o efeito ao fundo; ainda assim, achei interessante e pretendo testar de novo numa tela maior; adicionar uma opção para esconder as caixas ajudaria bastante
Parece usar uma técnica parecida com a da minha implementação de glass https://news.ycombinator.com/item?id=42225481, especialmente no uso intensivo de box-shadow
- Seu projeto está realmente incrível; fico feliz em ver que não sou o único desenvolvedor usando várias camadas de sombra para dar profundidade; a ideia de adicionar Light Rays me impressionou especialmente
Funciona bem como efeito para fundo de página na web
No meu celular, o scroll está bem lento; fiquei na dúvida se há algum outro efeito de scroll propositalmente desacelerado ou se isso é um efeito colateral do glass
- Observação interessante; não há nenhum efeito de scroll na página; seria ótimo se você pudesse compartilhar qual dispositivo, navegador e condição de rede está usando
- No meu dispositivo com M4 e 128 GB de RAM roda bem
Achei muito bem feito; sempre me surpreende como computação gráfica não é “um único truque especial”, mas na prática “cinco camadas de truques”; também imagino que suporte cross-browser seja um grande desafio; você tem alguma ideia de qual parte consome mais recursos? Meu palpite seria o backdrop-filter
- Eu também não imaginava que seriam necessários vários truques; a parte mais pesada é o processamento de blur do backdrop-filter; quanto maior o valor de blur, mais informações de pixels ao redor precisam ser consultadas na renderização; outra parte que consome recursos é a atualização em tempo real da aparência do glass durante o scroll ou quando o fundo em vídeo muda
- Às vezes, até para simplesmente “centralizar algo” você acaba precisando de “cinco camadas de truques”