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
  • O glass3d generator é uma ferramenta que permite alterar configurações, visualizar instantaneamente e copiar o CSS de textura de vidro
  • Os principais ajustes são blur, brightness, saturation do backdrop-filter, além da seleção de cor e textura
  • A cor é tratada com HSL e valor alfa, e um exemplo é hsl(189 80% 10% / 0.2)
  • A textura pode ser escolhida entre rice paper, egg shell, ink jet, coarse e topology
  • O CSS gerado combina .glass3d, ::before, ::after e o z-index dos elementos filhos para separar filtro de fundo, textura de ruído, sombra interna e camada de conteúdo

Valores ajustáveis no glass3d generator

  • Ao alterar as configurações, o resultado é refletido imediatamente na própria interface
  • O CSS final pode ser copiado e usado
  • Os principais itens de configuração são:
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Estrutura do CSS gerado

  • A classe .glass3d define variáveis CSS e a base das camadas
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: egg-shell.png do transparenttextures.com
    • Usa position: relative, z-index: 4 e múltiplos níveis de box-shadow
  • .glass3d::before aplica filtro de fundo e textura
    • Usa var(--filter-glass3d) em -webkit-backdrop-filter e backdrop-filter
    • background-color e background-image recebem, respectivamente, a variável de cor e a variável de ruído
    • Define background-size: 100px e background-repeat: repeat
  • .glass3d::after adiciona sombra de destaque interna
    • Usa vários valores de inset box-shadow
  • .glass3d > * aplica position: relative e z-index: 6 para que o conteúdo apareça por cima

Leituras relacionadas

1 comentários

 
GN⁺ 2025-07-04
Opiniões no Hacker News

  • Esta abordagem tem o problema de aplicar o desfoque usando apenas os pixels imediatamente atrás da superfície, algo bem demonstrado em https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
    Vale a pena ler junto com a discussão em https://news.ycombinator.com/item?id=42302907. Se o fundo estiver se movendo por baixo, o problema de desfocar apenas os pixels logo atrás é bem importante; se o fundo for estático, em geral não importa tanto

    • Li o excelente artigo do Josh e também implementei o tutorial, mas tive problemas na parte de tratar o border-radius com uma máscara SVG
      Funcionou bem em elementos hardcoded, mas ainda preciso resolver como fazer isso funcionar em uma biblioteca inteira de componentes em que o border-radius muda conforme o branding do usuário e container queries
    • A solução do Josh também parece intuitivamente errada. Ela parece assumir que elementos próximos são corpos emissores de luz, mas é difícil dizer que os “materiais” da web tenham, por padrão, esse tipo de propriedade física
      Eu diria que o material padrão está mais perto de papel
    • É difícil dizer qual dos dois é mais correto. A abordagem padrão aproxima objetos que estão logo atrás de um vidro fosco, enquanto a abordagem ajustada imita objetos muito mais distantes
      Para mim, a versão ajustada entra em conflito com as pistas de profundidade, ficando muito mais distrativa e parecendo mais errada

  • Parece bem bom, mas, sem a refração do vidro, desaparece a forte sensação de separação entre camadas que vejo como a maior contribuição do Liquid Glass
    O Material tem um ótimo material para designers que mostra em 3D lateral que um app deve ser composto por camadas móveis consistentes. Mas, quando se junta tudo em 2D, fica muito difícil descobrir qual função está onde. É muito comum as pessoas não enxergarem botões de ação nos cantos
    O movimento ajuda um pouco a diferenciar o chrome do conteúdo, mas há poucos elementos que façam essa definição visualmente. Para mim, a maior vantagem do Liquid Glass é a distorção nas bordas. Quando o conteúdo se move, há um movimento não linear, e a visão humana capta isso imediatamente
    Capturas de tela estáticas nem sempre ficam boas, mas, em movimento, a distinção entre elementos é muito melhor do que em qualquer coisa que eu tenha visto até agora. Aqui falta o elemento central de refração que tira grande proveito da detecção de movimento humana
    Eu tinha visto antes mais uma ótima demo na web, mas agora é difícil encontrá-la; em vez disso, esta demo tem desempenho ruim no mobile e é visualmente inferior, mas mostra bem, passo a passo, como o trabalho é complexo. Implementar distorção nas bordas só com filtros SVG é um caminho bem penoso: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Também encontrei uma coleção de tentativas de Liquid Glass (CodePen Spark), e o segundo link me parece um exemplo muito bem feito com um SVG hardcoded, pré-definido de forma bastante específica: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Parece que a Apple criou um fosso defensivo inteligente com o Liquid Glass. É fácil fazer uma versão pior, mas ela escolheu um efeito cuja forma realmente correta é muito difícil
      As pessoas veem vidro real todos os dias, então têm uma intuição sobre o que parece verdadeiro e correto. Por isso, as imitações parecem claramente piores, e a Apple consegue manter uma imagem de produto que “parece premium”
    • Concordo que a distorção nas bordas do Liquid Glass fica bonita, e penso em tentar reproduzi-la eu mesmo mais tarde
      No projeto atual, o objetivo era criar um material com aparência polida, que funcionasse de forma consistente entre navegadores e não usasse 3D real. Também é verdade que o efeito aparece melhor quando se move sobre um fundo fixo. No site de demonstração da biblioteca em que estou trabalhando, faço isso, mas ele ainda não está pronto
    • Acho até bom que o efeito de refração tenha ficado de fora. Já considero o vidro fosco meio ambíguo, e realmente detesto o efeito de refração. Ele distrai demais e, em certas situações, inevitavelmente vai parecer feio
      Sei que vidro real se comporta assim, mas não quero ter que me preocupar com isso. Parece que escolheram as piores partes do skeuomorfismo e dobraram a aposta nelas, e digo isso mesmo sendo alguém que preferia a fase anterior ao iOS 7

  • É um efeito legal, mas, para mim, não parece vidro de verdade
    A diferença mais imediata é que a luz não interage com o bisel. Eu esperaria que a luz entrasse novamente no vidro e também afetasse a iluminação e as cores. Apenas aplicar desfoque não basta
    Além disso, vidro pode ter sombras próprias e cáusticas interessantes. Aqui dá para ver a sombra, mas ela parece um simples drop shadow, então o objeto se parece mais com um cartão plano do que com um objeto físico 3D que faz parte do novo fluxo
    De qualquer forma, não é fácil simular isso só com CSS, e shaders rodando na GPU parecem mais adequados

    • Se não dá para fazer com CSS, não sei como deveria ser feito. Como aplicar um efeito de shader de GPU a uma div comum? Se não for possível aplicar efeitos de GPU ao HTML básico e for preciso fazer isso em algum elemento customizado, como uma combinação arbitrária de Canvas, talvez seja melhor recriar um mecanismo de renderização totalmente novo que permita aplicar efeitos de GPU
      Para mim, o HTML está morto. Para transmitir texto, algumas tags bastam, e a maior parte do resto é usada para transformar páginas web em bombas de anúncios. Então seria melhor recomeçar com uma tag <text> e melhor integração com GPU, deixando o restante de fora

  • Criei uma versão em JavaScript que realmente refrata os elementos da página: https://real-glass.vercel.app/

    • No Safari, o efeito fosco não funciona

  • Estou reunindo coisas assim: https://github.com/swyxio/spark-joy
    Outros materiais incluem um gerador de CSS gratuito baseado na especificação de design glassmorphism https://ui.glass/generator/, um cabeçalho fixo de vidro fosco https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism no codepen e in context

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • Ficou muito bem feito. Sempre me surpreende que computação gráfica não seja “um truque estranho”, mas algo mais próximo de 5 truques empilhados em camadas
    Fazer funcionar de forma compatível entre navegadores é um desafio extra. Fico curioso para saber se você tem uma ideia de qual parte consome mais recursos. Pensando de forma simples, eu diria que é o backdrop-filter

    • Sim, eu não imaginava que seriam necessários tantos truques para implementar isso
      Sua intuição está certa: a parte que mais consome recursos é o desfoque do backdrop-filter. Quanto maior o valor do desfoque, mais pixels vizinhos precisam ser “consultados” antes da renderização
      Outro fator caro é que, quando há rolagem ou um fundo de vídeo alterando a aparência do vidro, é preciso redesenhar continuamente
    • Às vezes, até para “centralizar” algo, são necessários 5 níveis de truques

  • Parece usar uma técnica parecida com a minha implementação de vidro: https://news.ycombinator.com/item?id=42225481
    Especialmente a parte de usar box-shadow de forma exagerada

    • O projeto parece legal. Fico feliz de ver que não sou o único que se aprofunda em 5 ou mais camadas de sombra. A adição de Light Rays, em especial, é impressionante

  • Um pequeno problema: a sombra entre o topo e a área rolável com os toggles/código desaparece quando você rola para baixo. Acho que provavelmente ela deveria ficar escondida no início e aparecer depois

    • Bem observado. Não é um problema de fade-in; a sombra simplesmente rola para fora da tela
      Aqueles box-shadow de “overhang” foram pensados para serem aplicados dentro de um elemento, não projetados para baixo a partir de algum elemento, e percebi que, neste caso, preciso aplicar o segundo tipo de sombra

  • No meu celular, a rolagem do conteúdo fica bem lenta. Fico curioso se há algum outro efeito de rolagem deixando isso lento de propósito, ou se é um efeito colateral do efeito de vidro

    • Interessante, mas não há nenhum efeito de rolagem em lugar nenhum da página. Você poderia informar qual dispositivo, navegador e nível de conexão de internet está usando?
    • No M4 com 128 GB de RAM, funciona bem

  • Posso ter deixado passar algo, mas no mobile seria muito mais útil se desse para ocultar ou recolher a caixa
    Agora ela ocupa a tela inteira, então quase não dá para ver o efeito por trás. Ainda assim, tenho interesse e pretendo tentar de novo depois em uma tela maior, mas acho que uma opção para ocultar a caixa melhoraria bastante

    • Você está falando da área de pré-visualização do código?
      Na primeira implementação, coloquei um pequeno retângulo de demonstração acima da UI do gerador, mas até mesmo algo pequeno ocupava espaço demais e dificultava o uso da UI. Quando a página inteira rolava, as pessoas ficavam frustradas porque não ficava claro que era preciso estar no topo da rolagem para ver o retângulo que estavam editando
      Esta ferramenta é principalmente para codificação, então priorizo a experiência em desktop, e no mobile ela fica mais como uma prévia rápida e uma prova de que também funciona no celular. Ainda assim, se você conhecer alguma UI parecida que funcione muito bem no mobile, eu gostaria de ver o link