El minimalismo plano de la última década está cediendo terreno a algo más rico: el volumen. Apple ha encabezado la tendencia con lo que ya se conoce como Liquid Glass, una estética de UI con vidrio translúcido, sombras profundas, refracción suave y movimiento que recuerda al lÃquido. Aquà te explico qué es, por qué encaja en 2026 y cómo conseguirla en CSS sin morir en el intento.
Qué es Liquid Glass
Es una evolución del glassmorphism clásico que combina cuatro elementos: vidrio translúcido con blur, sombras suaves de profundidad, ruido o textura sutil para no parecer plástico, y micromovimientos al hover o scroll que sugieren respuesta lÃquida del material.
Apple lo ha llevado a su sistema con iOS 19 y macOS 16: paneles flotantes con vidrio dinámico que adapta su tonalidad al contenido detrás. Esto está marcando el rumbo de las UI premium en 2026.
Diferencias con glassmorphism clásico
| Aspecto | Glassmorphism | Liquid Glass |
|---|---|---|
| Blur | Plano (20-40px) | Dinámico, capas variables |
| Sombras | Suaves planas | Multi-capa con profundidad |
| Textura | Ninguna o ruido fino | Refracción visible |
| Movimiento | Estático | Microinteracciones lÃquidas |
| Color base | Blanco/negro 50% | Color contextual al fondo |
Cómo conseguirlo en CSS
La base es backdrop-filter combinada con gradientes y sombras estratificadas:
.liquid-glass {
background: linear-gradient(135deg,
rgba(255,255,255,0.10),
rgba(255,255,255,0.05));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.15);
box-shadow:
0 8px 32px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.20);
border-radius: 16px;
transition: all 250ms ease;
}
.liquid-glass:hover {
backdrop-filter: blur(24px) saturate(200%);
transform: translateY(-2px);
}La clave: gradiente sutil, blur fuerte, saturate para enriquecer color del fondo, borde clarito, sombra externa + sombra interna superior para simular brillo.
Cuándo usar Liquid Glass y cuándo no
Cuándo sÃ
- Paneles flotantes sobre fondos con imagen o gradiente.
- Modales y popovers que necesitan jerarquÃa visual.
- Sidebars de apps premium o dashboards.
- Marcas premium tipo Apple, Samsung One UI, Notion.
Cuándo no
- Sobre fondos blancos planos (pierde gracia).
- Webs de bajo presupuesto en hosting compartido (el blur consume GPU).
- Cuando la audiencia tiene muchos dispositivos viejos (Safari iOS 14 da problemas).
- Si el contraste de lectura no llega a WCAG AA.
Performance: lo que cuesta el blur
backdrop-filter es caro en GPU. En dispositivos antiguos puede generar saltos de framerate visibles. Recomendaciones para mitigar: limita el uso a elementos pequeños sobre la pantalla a la vez, usa will-change con prudencia (no en exceso), añade fallback con background sólido para navegadores sin soporte, y testea en mobile real (no solo en DevTools).
Tip: Para experimentar con Liquid Glass sin código, Figma ya tiene plugins community que te generan presets exportables como CSS.
Accesibilidad: el punto crÃtico
El vidrio translúcido es un imán para problemas de contraste. Verifica siempre: ratio mÃnimo 4.5:1 entre texto y fondo efectivo (después del blur), evita texto sobre zonas con gradientes muy variables, considera fondos sólidos detrás del texto crÃtico dentro del panel glass.
Preguntas frecuentes
¿Es lo mismo que glassmorphism?
Es una evolución. Comparte la base (translucidez con blur) pero añade más capas: sombras de profundidad, textura, movimiento. Liquid Glass = glassmorphism con esteroides.
¿Funciona en todos los navegadores?
backdrop-filter es Baseline Widely available. Compatible en todos los navegadores modernos. Versiones antiguas de Safari iOS dan problemas con saturate alto.
¿Lo puedo usar en cualquier tipo de web?
Funciona mejor en apps premium, dashboards, landings creativas. En webs corporativas conservadoras o e-commerce de masas suele desentonar.
¿Penaliza Core Web Vitals?
No directamente LCP/CLS, pero puede afectar al INP en interacciones si abusas. Limita el uso a 2-3 elementos visibles a la vez.
¿Va a sustituir al flat design?
No del todo. Va a convivir. El flat sigue siendo eficiente y rápido. Liquid Glass aporta diferenciación premium.
Conclusión: úsalo donde aporte, no de adorno
Liquid Glass es la estética que mejor representa el deseo de volumen y textura tras una década de flat extremo. Bien aplicado, transmite premium y modernidad. Mal aplicado, se ve recargado y daña performance.
Mi consejo: empieza por un elemento (un panel lateral, una card destacada) y mide cómo afecta a tu performance y a la percepción del usuario. Si encaja, expande con criterio.
