El glassmorphism es el aspecto de vidrio esmerilado: un panel translúcido que desenfoca lo que hay detrás. Depende de un puñado de propiedades CSS que trabajan juntas.
La receta
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
Cada ingrediente
- Fondo translúcido: un color rgba con alfa bajo, para que se vea el contenido de detrás.
- backdrop-filter: desenfoca el área detrás del elemento. A diferencia de
filter: blur, deja nítido el contenido del propio elemento. - Borde sutil: un borde claro semitransparente imita el canto de un cristal.
- Sombra suave: despega el panel del fondo.
- Esquinas redondeadas: suavizan la forma.
El fondo importa
El efecto necesita algo que desenfocar. Sobre una página blanca lisa el cristal es invisible. Colócalo sobre un degradado colorido, una imagen o formas de distintos colores, y el desenfoque se nota claramente.
Ajustes
- Un desenfoque mayor da un aspecto más esmerilado; de 8 a 20 px es lo típico.
- Un alfa menor muestra más del fondo; uno mayor mejora la legibilidad.
- Un poco de
saturate(150%)en el filtro hace que los colores de detrás se vean más ricos.
Compatibilidad y alternativas
Backdrop-filter es compatible con todos los navegadores principales actuales, aunque las versiones antiguas pueden necesitar el prefijo -webkit-. Ofrece una alternativa con un fondo más opaco mediante una regla @supports not (backdrop-filter: blur(1px)), para que el texto siga siendo legible cuando falte el efecto.
Preguntas frecuentes
¿Afecta al rendimiento? Desenfocar áreas grandes puede ser costoso en dispositivos débiles. Limítalo a pocos paneles.
¿Por qué no desenfoca mi elemento? El elemento o un ancestro puede tener un fondo opaco, o su padre usa reglas de overflow que recortan el fondo.