# Liquid glass

También llamado: Apple liquid glass, cristal de iOS 26, UI refractiva, cristal con efecto lente  
Época: 2025 en adelante (Apple WWDC 2025)  
Página: https://designforai.dev/es/style/liquid-glass

## Rasgos

- cristal que se comporta como una lente: los bordes refractan y se iluminan, el centro se mantiene claro
- brillo especular a lo largo del borde superior, sutil reborde oscuro en el inferior
- los paneles tienen forma de píldora o cápsula y flotan sobre el contenido en vez de enmarcarlo
- los controles se transforman y se fusionan (una barra de pestañas se convierte en una sola píldora al hacer scroll)
- el fondo es contenido real (fotos, mapas), no manchas decorativas
- radio muy alto (píldoras completas), tipografía fina, controles compactos
- movimiento fluido y basado en físicas: elástico, rápido, con un ligero rebasamiento

Paleta: guiada por el contenido, pero el chrome usa relleno rgba(255,255,255,0.18), brillo superior rgba(255,255,255,0.6), reborde inferior rgba(0,0,0,0.12), acento #0a84ff, texto #ffffff sobre oscuro, texto #1c1c1e sobre claro

Tipografía: sans del sistema (SF Pro en Apple; usa Geist como sustituto libre); etiquetas 500 a 13-15px, títulos 600 a 22-34px; letter-spacing ligeramente negativo en los títulos

## Haz

- superpón los controles de cristal sobre imágenes ricas; el efecto vive en la refracción de lo que hay detrás
- construye el brillo con dos box-shadows inset (claro arriba, oscuro abajo) más un leve resplandor exterior
- usa easing elástico (cubic-bezier(0.34,1.56,0.64,1)) a 350-450ms para las transformaciones

## Evita

- no lo uses en contenedores grandes; liquid glass es para controles y barras flotantes, no para secciones de página
- no sacrifiques la legibilidad por el efecto; añade un velo oscuro bajo el texto cuando el fondo esté cargado
- no lo falsees con un blanco plano al 10%; el tratamiento del borde es todo el estilo

Conocido por: Apple iOS 26 / macOS Tahoe, barras de herramientas de Apple Music y Maps

## Semilla CSS

```css
:root{--bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif}
```

## Prompt

Construye el sitio en estilo Apple liquid glass. El contenido es fotografía a sangre o un mapa; todo el chrome flota encima en paneles con forma de cápsula (border-radius 999px para barras, 28px para hojas). Receta del cristal: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); añade un borde exterior de 1px rgba(255,255,255,0.25). Acento #0a84ff para la pestaña activa y el botón primario. Fuente Geist: títulos 600 a 28-34px con tracking -0.02em, etiquetas 500 a 14px. La barra de pestañas inferior se colapsa en una sola píldora al hacer scroll con un spring de 400ms (cubic-bezier(0.34,1.56,0.64,1)). Reserva el cristal solo para controles; las secciones de página se mantienen sólidas. Respeta prefers-reduced-motion desactivando la transformación.