Liquid Glass implementado com CSS

• Como recriar, com uma combinação de CSS e filtros SVG, os principais efeitos da linguagem de design Liquid Glass apresentada pela Apple na WWDC25
• Implementação passo a passo em CSS/SVG de várias camadas que imitam vidro real, como Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion e Chromatic Aberration
• A implementação dos efeitos principais usa técnicas avançadas de CSS e SVG, como backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset e Blend
• A compatibilidade entre navegadores é centrada no Chrome; no Safari/Firefox, os filtros SVG não funcionam, então apenas Blur e Shadow são aplicados
• Quanto mais complexo o efeito, maior o uso de GPU, e o uso excessivo em toda a UI pode causar queda de desempenho, por isso o recomendado é aplicá-lo apenas em áreas-chave

---

O que é Liquid Glass?

• É a mais recente linguagem de design da Apple, voltada a efeitos gráficos sofisticados que imitam vidro real, como reflexo e refração da luz, variação de cor e sensação de profundidade
• É usada para adicionar profundidade e vivacidade a elementos de UI, com uma aparência visualmente fluida que lembra uma sensação física tátil

Principais camadas do efeito e como implementá-las

1. Specular Highlights (reflexos no vidro)

• Adiciona highlights nas bordas do vidro para reforçar profundidade e volume
• Aplica várias camadas de inset box-shadow no CSS para expressar a sensação de luz refletindo em diferentes ângulos

  box-shadow:  
      inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
      inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
      inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
      inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
  

• Faz referência ao [Fresnel Effect] para ajustar de forma natural a intensidade do reflexo da luz

2. Blur (desfoque do fundo)

• Usa backdrop-filter: blur(20px); para aplicar desfoque apenas ao conteúdo atrás do vidro
• O efeito é aplicado somente ao conteúdo de fundo, e não ao próprio elemento

3. Color Filter (realce de cor)

• Aplica filtros adicionais no backdrop-filter, como contrast(80%) saturate(120%), para obter cores mais vivas por meio de aumento da saturação e redução do contraste no conteúdo atrás do vidro

  backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
  

4. Simulação de refração (Refraction)

• O efeito de refração, em que a superfície curva do vidro faz o fundo parecer distorcido, tem limitações em CSS puro, então é implementado em conjunto com filtros SVG

• Displacement Map: usa gradientes SVG para gerar um mapa de distorção (Identity Map) em que os pixels são comprimidos nas bordas e expandidos no centro

  • Nos exemplos de SVG, gradientes em vermelho/azul definem a quantidade de deslocamento de pixels nos eixos X/Y
  • Ajustando a rampa do gradiente, é possível desenhar o padrão de compressão nas bordas e expansão no centro
  • O SVG é convertido em Data URL e carregado com feImage, sendo usado na transformação de coordenadas com feDisplacementMap

• Ripple Distortion: combina feTurbulence (textura de ruído) com um feDisplacementMap adicional para reproduzir até as pequenas ondulações da superfície do vidro

• Chromatic Aberration: combina feColorMatrix, feOffset e feBlend para separar, deslocar e recompor os canais RGB, imitando a dispersão de luz observada em vidro real

Como aplicar os efeitos CSS/SVG

• Depois de definir o filtro SVG, use filter: url(#filterId); para aplicá-lo a um elemento DOM
• A cadeia de filtros com todos os efeitos combinados recria ao mesmo tempo textura, distorção de luz e modulação de cor de um painel de vidro realista

Pontos de atenção sobre compatibilidade e desempenho

• O filtro SVG de displacement só é suportado corretamente no Chrome. Em Safari, Firefox e outros, o efeito fica limitado (restam apenas Blur/Shadow)
• Quando há muitos elementos de vidro ou animações, a carga na GPU aumenta bastante e o desempenho de renderização cai
• Na prática, o ideal é usar isso apenas em partes da UI que realmente precisam de destaque, como áreas Hero/Feature

Referências e créditos

• Esta implementação se baseia em "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" da Smashing Magazine e na documentação oficial do Apple Liquid Glass
• O ponto central é o uso combinado de tecnologias web modernas, como SVG displacement, CSS backdrop-filter e box-shadow

[geek12356]

Parece que o que esta pessoa implementou ficou mais natural.
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Isso não funciona no Safari.

[bobross0]

Ainda parece meio estranho de implementar na web haha