CSS Glassmorphism en 2025: la forma correcta de implementarlo

La mayoría de tutoriales que encuentras en línea son de 2021. Esto es lo que ha cambiado y lo que estás haciendo mal.

9 min de lectura backdrop-filter WCAG 2.1

El glassmorphism explotó en 2021 gracias a un tutorial de Figma y el rediseño de macOS Big Sur. Cuatro años después, backdrop-filter alcanza el 96 % de soporte global, pero los artículos que posicionan para la consulta siguen siendo los mismos: desactualizados, ciegos al rendimiento y sordos a la accesibilidad. Esta guía llena el vacío.

backdrop-filter vs filter

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

WCAG

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Performance

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}
Herramienta gratuita Verificador de Contraste Comprueba el cumplimiento WCAG AA / AAA de cualquier par de colores

Progressive Fallback

.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

Dark Mode

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}
Herramienta gratuita Generador Glassmorphism Crea tarjetas de vidrio con backdrop-filter, fallback @supports y vista previa

Cuándo NO usar glassmorphism

Abrir el generador

Herramienta gratuita Generador Box Shadow Ajusta los parámetros visualmente y copia el CSS listo para producción

CSS Glassmorphism en 2025: soporte de navegadores, rendimiento, accesibilidad

El glassmorphism CSS se basa en la propiedad backdrop-filter, que alcanzó soporte completo entre navegadores en 2023. En 2025, el soporte global es de aproximadamente el 96 %. Firefox añadió soporte en la versión 103 (2022), eliminando la necesidad de polyfills JavaScript.

Preguntas frecuentes

¿Cuál es la diferencia entre backdrop-filter y filter en CSS?+
backdrop-filter aplica efectos visuales al área detrás de un elemento sin afectar su propio contenido. filter actúa sobre el elemento mismo. Para glassmorphism, siempre usar backdrop-filter: filter: blur() en la tarjeta difumina el texto de la tarjeta.
¿Firefox soporta backdrop-filter en 2025?+
Sí. Firefox añadió soporte en la versión 103 (julio 2022). En 2025 está completamente soportado en Chrome 76+, Firefox 103+, Safari 9+ (con prefijo -webkit-), Edge 17+.
¿Por qué mi glass card se ve mal en móvil?+
Dos razones comunes: rendimiento — radios de desenfoque altos (más de 16–20 px) pueden causar bajadas de framerate en Android de gama media. Contraste — en pantallas móviles con alta luminosidad, una glass card con alpha bajo puede hacer el texto casi ilegible.
¿Cómo hacer el glassmorphism accesible?+
El problema principal es el contraste del texto. WCAG 2.1 AA requiere 4.5:1. Soluciones: añadir text-shadow, dar al texto un fondo semiopaco oscuro, o controlar el fondo detrás de la tarjeta. También respetar prefers-reduced-motion.
¿Qué radio de desenfoque usar para el glassmorphism?+
El rango más usado en producción es 8–16 px. Por debajo de 8 px, el efecto frost apenas es visible. Por encima de 20 px, el efecto es llamativo pero costoso. Para móvil, limitar a 10–12 px.
¿Cómo escribir un fallback para navegadores sin backdrop-filter?+
Usar la regla @supports con progressive enhancement: definir un fondo sólido y casi opaco como estilo base, luego sobreescribir con el fondo translúcido y el filtro blur dentro de @supports.
¿Es el glassmorphism todavía relevante en 2025?+
Sí — ha madurado de tendencia a patrón UI estándar para contextos específicos. Apple, Microsoft y Google usan efectos de vidrio esmerilado en sus UIs de sistema operativo. El entusiasmo de 2021 ha dado paso a un uso más intencional.