Liquid Glass implementado con CSS

• Cómo recrear con CSS y una combinación de filtros SVG los efectos clave del lenguaje de diseño Liquid Glass que Apple presentó en WWDC25
• Implementación paso a paso en CSS/SVG de varias capas que imitan materiales de vidrio reales, como Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion y Chromatic Aberration
• Para implementar los efectos principales se usan técnicas avanzadas de CSS y SVG como backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset y Blend
• La compatibilidad de navegadores está centrada en Chrome; en Safari/Firefox los filtros SVG no funcionan, por lo que solo se aplican Blur y Shadow
• Cuanto más complejo es el efecto, mayor es el uso de GPU, y abusar de él en toda la UI puede degradar el rendimiento, por lo que se recomienda usarlo solo en áreas clave

---

¿Qué es Liquid Glass?

• Es el lenguaje de diseño más reciente de Apple, orientado a efectos gráficos avanzados que imitan la reflexión y refracción de la luz, los cambios de color y la sensación de volumen de un vidrio real
• Se utiliza para añadir profundidad y vivacidad a los elementos de la UI, con una apariencia visual fluida que evoca una sensación física y táctil

Capas principales del efecto y cómo implementarlas

1. Specular Highlights (reflejos especulares del vidrio)

• Se agregan brillos en los bordes del vidrio para enfatizar la profundidad y el volumen
• Superponiendo varios inset box-shadow de CSS se expresa la sensación de reflejo de la luz desde distintos á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);  
  

• Tomando como referencia el [Fresnel Effect], se ajusta de forma natural la intensidad del reflejo de la luz

2. Blur (desenfoque del fondo)

• Para aplicar desenfoque solo al contenido detrás del vidrio, se usa backdrop-filter: blur(20px);
• El efecto no se aplica al elemento en sí, sino únicamente al contenido del fondo

3. Color Filter (realce de color)

• Se añaden filtros backdrop como contrast(80%) saturate(120%) para lograr colores más definidos mediante mayor saturación y menor contraste en el contenido detrás del vidrio

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

4. Simulación de refracción (Refraction)

• Como el efecto de refracción que hace que la curvatura del vidrio distorsione el fondo es difícil de implementar solo con CSS, se combina con filtros SVG

• Displacement Map: usando gradients de SVG se genera un mapa de distorsión (Identity Map) en el que los píxeles se comprimen en los bordes y se expanden en la zona central

  • En el SVG de ejemplo, los gradients rojo/azul definen la cantidad de desplazamiento de píxeles en los ejes X/Y
  • Ajustando la rampa del gradient se diseña el patrón de compresión en bordes y expansión en el centro
  • El SVG se convierte en un Data URL para cargarlo con feImage y usarlo en la transformación de coordenadas en feDisplacementMap

• Ripple Distortion: una combinación de feTurbulence (textura de ruido) y un feDisplacementMap adicional permite representar incluso pequeñas ondulaciones en la superficie del vidrio

• Chromatic Aberration (aberración cromática): con una combinación de feColorMatrix, feOffset y feBlend se separan, desplazan y recomponen los canales RGB para imitar la dispersión de la luz que se observa en el vidrio real

Cómo aplicar los efectos CSS/SVG

• Después de definir un filtro SVG, se aplica a un elemento del DOM usando filter: url(#filterId);
• La cadena de filtros que combina todos los efectos reproduce al mismo tiempo una textura similar a un panel de vidrio real, la distorsión de la luz y la alteración de color

Consideraciones de compatibilidad y rendimiento

• El filtro SVG de displacement solo está bien soportado en Chrome. En Safari, Firefox y otros navegadores el efecto es limitado (solo quedan Blur/Shadow)
• Si hay muchos elementos de vidrio o se les aplica animación, la carga sobre la GPU es alta y puede bajar el rendimiento de renderizado
• En la práctica, conviene usarlo solo en algunas partes de la UI que necesiten énfasis, como áreas Hero/Feature

Referencias y créditos

• Esta implementación se basa en "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" de Smashing Magazine y en la documentación oficial de Apple sobre Liquid Glass
• La clave está en el uso combinado de tecnologías web modernas como SVG displacement, CSS backdrop-filter y box-shadow

[geek12356]

Parece que lo que implementó esta persona se ve más natural
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Esto no se aplica en Safari.

[bobross0]

Todavía se siente algo raro implementarlo en la web jaja