Glassmorphism en CSS: cómo funciona backdrop-filter y cuándo usarlo

El glassmorphism es la tendencia de diseño que simula cristal esmerilado: tarjetas translúcidas que desenfocan lo que hay detrás de ellas. Detrás de ese efecto visual hay una sola propiedad CSS que hace casi todo el trabajo, y entenderla bien marca la diferencia entre un resultado elegante y uno que destroza el rendimiento de la página.

La receta: cuatro declaraciones

Un elemento glassmórfico completo se compone así:

.glass {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

Cada línea cumple una función concreta y ninguna sobra:

• background con alpha bajo: el tinte de color del cristal. Una opacidad entre el 10% y el 25% deja ver el fondo mientras aporta presencia al elemento.
• backdrop-filter: blur(): el corazón del efecto. Desenfoca todo lo que está detrás del elemento, no el contenido interior.
• Borde translúcido de 1px: simula el canto del cristal capturando la luz. Es un detalle pequeño pero es el que evita que la tarjeta se funda con el fondo.
• Sombra suave: separa el elemento del plano del fondo y le da profundidad física.

backdrop-filter no es filter

La confusión más común es usar filter: blur() en lugar de backdrop-filter: blur(). No son intercambiables:

• filter: blur() aplica el desenfoque al propio elemento y todo su contenido, incluido el texto dentro de la tarjeta. El texto queda ilegible.
• backdrop-filter: blur() desenfoca únicamente lo que hay detrás del elemento. El contenido interior permanece nítido.

Es exactamente la diferencia entre mirar a través de un cristal esmerilado y meter el objeto dentro del esmerilado.

El prefijo -webkit- sigue siendo necesario

Safari implementó la propiedad antes de que el nombre se estandarizara, por eso necesita el prefijo -webkit-backdrop-filter. Todas las versiones de Safari actuales lo requieren; si solo escribes la propiedad estándar, en iPhones y Macs con Safari verás la tarjeta sin desenfoque, con el fondo completamente nítido detrás.

El orden correcto es prefijo primero, estándar después:

-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);

Así, cuando un navegador soporte ambas, la última declaración válida gana.

Sin fondo colorido no hay efecto

Este es el error número uno al probar glassmorphism: aplicarlo sobre un fondo blanco liso. Un cristal esmerilado sobre una pared blanca es invisible; necesitas variación visual detrás del elemento para que el desenfoque se perciba.

Los fondos que mejor lo lucen son gradientes con varios colores saturados o imágenes. Si tu diseño tiene fondo plano, puedes crear zonas de color detrás de las tarjetas con círculos difuminados posicionados absolutamente:

.fondo {
  background: #0f172a;
}
.fondo::before {
  content: "";
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #7c3aed;
  filter: blur(120px);
  opacity: 0.6;
}

Ese círculo gigante y desenfocado crea la mancha de color sobre la que el backdrop-filter sí tiene algo que desenfocar.

Rendimiento: el precio real

backdrop-filter es una de las propiedades más caras de CSS. Cada elemento que la usa obliga al navegador a componer dos veces: primero renderiza el fondo, luego aplica el filtro por píxel en la región del elemento. Tres cosas que debes saber:

1. Pocos elementos grandes van mejor que muchos pequeños. Cuatro tarjetas con blur están bien; cuarenta filas de tabla con blur harán sufrir al scroll incluso en hardware moderno.
2. Evita animarlo. Animar el valor de blur recalcula el filtro en cada frame. Si quieres movimiento, anima transform del propio elemento, nunca el blur.
3. En móvil el coste se multiplica. Prueba siempre en un dispositivo físico de gama media antes de dar el efecto por bueno.

Si detectas problemas, reduce el área filtrada o sustituye el blur por una opacidad mayor: pierdes el efecto esmerilado pero conservas la sensación translúcida a una fracción del coste.

Accesibilidad: contraste sobre ruido visual

El texto sobre un fondo desenfocado pero visible puede fallar los criterios de contraste WCAG dependiendo de qué haya justo debajo. Dos salvaguardas prácticas:

• Mantén la opacidad del fondo del cristal por encima del 12-15% para que el ruido del fondo quede suficientemente atenuado bajo el texto.
• Comprueba el contraste con el peor caso: la zona más clara y la más oscura del fondo que pase por detrás de la tarjeta.

Genera tu configuración visualmente

Ajustar opacidad, blur, radio y sombra a mano es un proceso de prueba y error. Nuestro generador de Glassmorphism te da vista previa inmediata sobre cinco fondos distintos (aurora, atardecer, océano, bosque y mesh) y emite el CSS final ya con el prefijo -webkit- incluido, listo para pegar.

Preguntas frecuentes

¿Qué navegadores no soportan backdrop-filter? Todos los navegadores modernos lo soportan (Chrome 76+, Firefox 103+, Safari 9+ con prefijo). Para navegadores muy antiguos, define un background con más opacidad como fallback mediante @supports.

¿Puedo aplicar más de un filtro? Sí, backdrop-filter acepta listas igual que filter: por ejemplo blur(12px) saturate(180%), combinación habitual para intensificar los colores del fondo tras desenfocarlo.

¿Funciona con elementos con overflow o transform? Hay casos límite: un ancestro con filter, transform o will-change puede romper el efecto porque cambia el contexto de composición. Si el blur no aparece, revisa los estilos de los contenedores superiores.

Crea tu tarjeta de cristal con vista previa en vivo usando el generador de Glassmorphism, gratis y directamente en tu navegador.