¿Qué es glassmorphism y cómo lo construyo en CSS?
Glassmorphism es el efecto de cristal esmerilado popularizado por macOS Big Sur, el Centro de Control de iOS, Windows 11. Una tarjeta parece estar hecha de cristal tintado y borroso que deja entrever el fondo. Es un estándar UI moderno para overlays, sidebars, navbars y modales.
En CSS es un stack de unas pocas propiedades: `backdrop-filter: blur()` difumina lo que hay detrás del elemento, un fondo translúcido añade el tinte, un borde blanco al 30% finge el borde del cristal, una sombra suave levanta el elemento del fondo.
Aquí eliges un fondo colorido (gradiente o pseudo-foto) y ves el efecto en vivo. Los sliders controlan la fuerza del blur, la saturación de colores detrás del cristal, el color y alpha del tinte. La salida es un bloque CSS `.glass {...}` listo.
Cómo usar
- Elige un fondo de los tiles (gradientes, foto sintética). El fondo debe ser colorido y variado para que el blur se note.
- Blur = fuerza del difuminado (16-24px es moderno, 30-40px es el look frosted-glass pesado).
- Saturate = saturación de colores tras el cristal (100% = original, 180% = boosted, da el feel premium).
- Tint + alpha = ligero coloreado del cristal. Blanco con alpha 0.1-0.3 para light mode, negro con alpha 0.3 para dark.
- Border con alpha blanca 30% simula el borde del cristal. Shadow levanta la tarjeta del fondo. Copia el CSS y pega en tu hoja de estilos.
Cuándo ayuda
Glassmorphism es un estándar en diseño moderno, especialmente para UI overlay. Algunos sitios donde brilla:
- Navbar sobre un hero con foto. Navbar transparente y borrosa, el contenido hace scroll debajo, lo ves a través del cristal.
- Modal / caja de diálogo. Tarjeta flota sobre un backdrop oscurecido con el fondo borroso visible a través del cristal.
- Sidebar de app (Notion, Linear). Especialmente en el lado derecho sobre contenido.
- Tarjetas en una hero section. Tres tarjetas de features con efecto frosted-glass sobre un fondo colorido.
- Overlay de reproductor de música. Apple Music / Spotify desktop es un caso de glassmorphism de manual.
- Toast de notificación. Un backdrop ligeramente borroso mantiene el toast legible sin ocultar contexto.
Recuerda: glassmorphism necesita color tras el cristal. Sobre un fondo blanco plano el efecto es invisible. Los mejores resultados son sobre fotografía, gradientes o una sección colorida. Para blur plano sin tinte mira box-shadow. Para redondeo de esquinas usa border-radius.