Liquid Glass de Apple: qué es y cómo llevarlo a tu web con CSS y Figma

Liquid Glass es el lenguaje de diseño que Apple estrenó con iOS 26: un material translúcido que deja ver lo que hay detrás, lo deforma en los bordes como una lente y brilla al moverse. Lo presentó en la WWDC del 9 de junio de 2025 y ahora está en todos sus sistemas.

Aquí te explico qué es exactamente, qué ha cambiado desde entonces y cómo llevarlo a tu web con CSS y a tus diseños con Figma. Con el código listo para copiar y una demo funcionando, y también con los casos en los que mejor no usarlo.

Qué es Liquid Glass y qué ha cambiado desde 2025

Apple lo anunció como su mayor rediseño en años, para iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 y tvOS 26. Llegó a los usuarios en septiembre de 2025. Botones, barras y menús pasaron a ser piezas de «vidrio» que flotan sobre el contenido y cambian de tono según lo que tengan detrás. Lo cuenta MacRumors.

La estética gustó, pero hubo muchas quejas de legibilidad. Apple ha ido dando marcha atrás poco a poco:

• iOS 26.1 (otoño de 2025): añadió en Ajustes, dentro de Pantalla y brillo, una opción para elegir entre vidrio transparente o tintado, según Gigazine.
• iOS 27 (WWDC, 8 de junio de 2026): esa opción pasa a ser un control deslizante, de totalmente claro a totalmente tintado. Además, ahora solo algunos elementos captan la luz, para una imagen más limpia. Lo resume TapSmart.

La lección para quien diseña webs es clara: si Apple, con su control total del hardware, ha tenido que rebajar la transparencia, en una web hay que ser todavía más prudente.

Liquid Glass vs. glassmorphism

El glassmorphism se puso de moda hacia 2020: paneles con desenfoque de fondo y un borde claro. Liquid Glass parte de ahí, pero añade lo que hace que parezca vidrio de verdad:

Aspecto	Glassmorphism	Liquid Glass
Fondo	Desenfoque uniforme	Desenfoque más refracción: los bordes deforman lo que hay detrás
Brillos	Un borde claro fijo	Reflejos que reaccionan a la luz y al movimiento
Color	Blanco o negro semitransparente	Toma el tono del contenido que tiene detrás
Movimiento	Estático	Se estira y se funde al interactuar
En la web	Se hace bien con CSS	Solo en parte: la refracción real es experimental

Cómo hacer Liquid Glass en CSS

No hay una propiedad «liquid glass» en CSS. Lo que sí puedes hacer es un vidrio esmerilado muy convincente, que funciona en todos los navegadores, y añadir refracción como extra donde se pueda.

Nivel 1: vidrio esmerilado (funciona en todos los navegadores)

La base es backdrop-filter, que desenfoca lo que hay detrás del elemento. El resto son detalles que lo hacen creíble: un fondo blanco muy transparente, un borde claro y dos sombras interiores que simulan el brillo del canto.

.liquid-glass {
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),   /* brillo del borde superior */
    inset 0 -1px 0 rgba(255, 255, 255, 0.15), /* reflejo inferior */
    0 8px 32px rgba(0, 0, 0, 0.12);           /* profundidad */
}

/* Navegadores sin backdrop-filter: fondo casi opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background: rgba(255, 255, 255, 0.88); }
}

/* Quien pide menos transparencia en su sistema */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Así se ve sobre un fondo con color:

Tres detalles que marcan la diferencia:

• El fondo importa más que el vidrio. Sobre blanco liso no se ve nada. Necesitas color, degradados o una foto detrás.
• Las dos reglas del final no son opcionales. La primera da un fondo sólido a los navegadores sin soporte. La segunda respeta a quien ha pedido menos transparencia en su sistema.
• No animes el desenfoque. Cambiar backdrop-filter en el hover obliga a recalcular el efecto en cada fotograma. Si quieres movimiento, anima transform.

La consulta prefers-reduced-transparency solo funciona por ahora en Chrome y Edge, según Can I use. En Safari y Firefox se ignora sin romper nada.

Nivel 2: refracción con un filtro SVG (experimental)

Para que el vidrio deforme el fondo como una lente, se combina backdrop-filter con un filtro SVG de desplazamiento:

<!-- Una vez por página, por ejemplo al final del body -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="lg-refraccion">
    <feTurbulence type="fractalNoise" baseFrequency="0.008"
      numOctaves="2" seed="3" result="ruido" />
    <feDisplacementMap in="SourceGraphic" in2="ruido" scale="40"
      xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<style>
  /* Solo como capa extra: en Safari y Firefox puede no verse */
  .liquid-glass--refraccion {
    backdrop-filter: blur(6px) url(#lg-refraccion) saturate(170%);
  }
</style>

Funciona en Chrome y Edge. En Safari y Firefox no es fiable, como explica este análisis de Ekino. Úsalo solo como capa extra y comprueba que el nivel 1 se ve bien sin él.

Si quieres entender mejor cómo funcionan los filtros, tienes la guía de filtros CSS con ejemplos.

Liquid Glass en Figma

Figma tiene un efecto Glass propio en el panel de efectos. Lo lanzó en beta en julio de 2025, tras el anuncio de Apple, y desde el 27 de enero de 2026 está disponible para todos. Se aplica a marcos, no a formas sueltas ni a texto.

Sus controles son los que hacen que parezca vidrio:

• Luz: el ángulo y la intensidad del brillo en el borde.
• Refracción: cuánto se deforma lo que hay detrás.
• Grosor: la sensación de volumen del canto.
• Dispersión: el pequeño arcoíris en los bordes.
• Desenfoque: el esmerilado del fondo.

Ojo al pasar el diseño a código: el efecto no se exporta a SVG ni a CSS. En la web tendrás que recrearlo con el nivel 1 de arriba, así que no prometas al cliente la refracción exacta de Figma.

Si diseñas apps para iPhone, Apple publica sus kits oficiales en Apple Design Resources. El de iOS 27 para Figma salió el 23 de junio de 2026 y ya trae los componentes con Liquid Glass.

Cuándo usarlo y cuándo no

Cuándo sí

• Paneles flotantes, menús y barras sobre fotos, vídeos o degradados.
• Modales y ventanas emergentes que tienen que destacar sobre el contenido.
• Landings de producto, apps y portfolios donde la estética pesa mucho.
• Webs que acompañan a una app de iPhone y quieren parecerse a ella.

Cuándo no

• Sobre fondos blancos o de un solo color: no se aprecia y solo resta contraste.
• En bloques de texto largo: el fondo cambiante cansa la vista.
• En webs con mucho público con móviles antiguos o de gama baja.
• En formularios y botones de compra, donde la claridad va primero.

Rendimiento: lo que cuesta el desenfoque

backdrop-filter se calcula en la tarjeta gráfica y no es gratis. En móviles modestos puede provocar tirones al hacer scroll. Para mantenerlo bajo control:

• Limítalo a dos o tres elementos visibles a la vez.
• No animes el desenfoque ni lo cambies en el hover.
• Evita transition: all en estos elementos. Anima solo la propiedad que cambia.
• Prueba en un móvil real, no solo en las herramientas del navegador.

Si añades movimiento, tienes ideas ligeras en estas microinteracciones con código.

Accesibilidad: el punto crítico

El vidrio es un imán para problemas de contraste, y Apple lo ha comprobado en primera persona. Antes de publicar:

• Comprueba un contraste mínimo de 4,5:1 entre el texto y el fondo real, después del desenfoque.
• Pon el texto importante sobre una zona más opaca del panel, no sobre el vidrio más transparente.
• Incluye la versión sin transparencia con prefers-reduced-transparency, como en el código de arriba.
• No dependas solo del vidrio para separar elementos: añade borde o sombra.

Desde junio de 2025, además, la accesibilidad es obligatoria para muchas webs de empresa en la UE. Te lo explico en la guía del European Accessibility Act.

Preguntas frecuentes

¿Qué es Liquid Glass?

Es el lenguaje de diseño de Apple desde iOS 26: elementos de interfaz con aspecto de vidrio translúcido, que reflejan y deforman el contenido de detrás y reaccionan al movimiento.

¿Es lo mismo que glassmorphism?

No exactamente. El glassmorphism es solo desenfoque y transparencia. Liquid Glass añade refracción en los bordes, brillos dinámicos y color que se adapta al fondo.

¿Funciona en todos los navegadores?

El vidrio esmerilado con backdrop-filter, sí: en Chrome, Edge, Safari y Firefox actuales. La refracción con filtros SVG solo funciona bien en Chrome y Edge.

¿Se puede quitar Liquid Glass en el iPhone?

Se puede rebajar. En iOS 26.1 se elige entre transparente y tintado, en Ajustes, dentro de Pantalla y brillo, y en iOS 27 hay un control deslizante. La opción de reducir transparencia de Accesibilidad también lo atenúa.

¿Penaliza Core Web Vitals?

No afecta al LCP ni al CLS por sí mismo. Si abusas del desenfoque o lo animas, puede empeorar la respuesta a las interacciones (INP) en móviles modestos.

¿Cómo se hace Liquid Glass en Figma?

Con el efecto Glass del panel de efectos, aplicado a un marco. Ajusta la luz, la refracción, el grosor, la dispersión y el desenfoque.

Úsalo donde aporte, no de adorno

Liquid Glass es la estética del momento, y bien aplicada transmite calidad y modernidad. Mal aplicada, se lee peor, va más lenta y envejece rápido.

Mi consejo: empieza por un solo elemento, como un menú flotante o una tarjeta destacada, con el código del nivel 1. Comprueba el contraste y el rendimiento en un móvil real. Si encaja, ve ampliando con criterio.

¿Te interesan más tendencias visuales? Mira estas funciones nuevas de CSS para 2026 o el polo opuesto, el neo-brutalismo web.