Generador de cristalmorfismo CSS

¿Qué es el glassmorphism?

El glassmorphism es una tendencia de diseño de interfaz que destaca elementos tipo vidrio esmerilado que dejan translucir el fondo a través de un efecto de desenfoque. Usa la propiedad CSS backdrop-filter: blur(), fondos semitransparentes y bordes sutiles para un resultado moderno y con capas. Es popular en interfaces de paneles, tarjetas y modales.

Compatibilidad de los navegadores

backdrop-filter está admitido por todos los navegadores modernos: Chrome, Edge, Safari y Firefox 103+. Para versiones más antiguas de Firefox, prevé un color de fondo liso como alternativa.

Cómo funciona

1. Elige un color de fondo. El cristal necesita algo detrás para ser visible. Elige un fondo sólido, un degradado o una foto para el área de vista previa, de modo que puedas juzgar cómo se leerá el desenfoque en tu maquetación real.
2. Ajusta el desenfoque y la saturación. El radio de desenfoque simula la dispersión de la luz del vidrio esmerilado; la saturación trae hacia delante los colores de detrás del panel. La receta clásica al estilo de Apple es de alrededor de blur(10px) saturate(180%).
3. Ajusta el color y la transparencia del cristal. El propio fondo del elemento debe ser parcialmente transparente; un bloque de color opaco bloquea por completo el fondo. Blanco o negro con un 10-30 % de alfa es el punto de partida habitual.
4. Ajusta el borde y el radio de las esquinas. Un borde blanco finísimo con poco alfa imita el reflejo del borde interior del cristal físico. Un border-radius de alrededor de 12-20px da el aspecto de tarjeta suave que usan la mayoría de los diseños de glassmorphism.
5. Copia el CSS. Pega el bloque de propiedades generado en tu hoja de estilos. Añade la línea complementaria -webkit-backdrop-filter si necesitas ser compatible con versiones antiguas de Safari.

De dónde vino el término

Lo visual es más antiguo que la etiqueta. Apple introdujo los fondos desenfocados en tiempo real para los paneles de notificaciones y el Centro de control con iOS 7 en 2013 y lo llevó al escritorio con macOS Yosemite al año siguiente; el equipo de WebKit lanzó la propiedad CSS backdrop-filter en agosto de 2015 específicamente porque, como dice su anuncio de lanzamiento, «el lenguaje de diseño de la interfaz de usuario de iOS 7 y OS X Yosemite cambió para incorporar hermosos efectos de desenfoque de fondo». El anterior «Aero Glass» (2007) de Windows Vista de Microsoft era la misma idea, y Microsoft documenta dos materiales relacionados en el sistema Fluent moderno: Acrylic (translúcido, desenfocado, con una superposición de ruido) y Mica (una variante opaca teñida del escritorio introducida con Windows 11). El nombre único «glassmorphism» lo acuñó el diseñador polaco Michał Malewicz de Hype4 Academy en noviembre de 2020, coincidiendo con el lanzamiento de macOS Big Sur; la coherencia en la nomenclatura, en la misma familia que el anterior «neumorphism», dio a los diseñadores un vocabulario compartido para hablar de la técnica.

La receta de CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Tres cosas que interiorizar sobre la receta. Primero, el propio fondo del elemento debe ser transparente o parcialmente transparente; MDN lo dice sin rodeos: «El elemento o su fondo debe ser transparente o parcialmente transparente para que el efecto sea visible». Un background-color totalmente opaco cubre la muestra desenfocada y el usuario ve un panel plano. Segundo, el efecto necesita algo detrás que desenfocar; el glassmorphism no funciona sobre una página blanca uniforme. Tercero, el Safari moderno acepta la propiedad sin prefijo, pero cualquier versión anterior a Safari 17 necesita tanto backdrop-filter como su gemela -webkit-backdrop-filter.

Las diez funciones de filtro

backdrop-filter está definido en el W3C Filter Effects Module Level 2 y acepta las mismas diez funciones de filtro que la propiedad filter normal: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() y sepia(). Se pueden encadenar, y el orden importa: se aplican de izquierda a derecha sobre la muestra de fondo. Para el glassmorphism, blur() más saturate() cubre el aspecto canónico; todo lo demás es ajuste creativo (p. ej., brightness(105%) sobre fondos oscuros para realzar la muestra desenfocada, o contrast(120%) para mantener nítidas las relaciones de color).

Compatibilidad de navegadores y el prefijo -webkit-

A fecha de 2026, la propiedad es compatible con todos los navegadores de actualización continua. WebKit la lanzó primero el 10 de agosto de 2015 con Safari 9 / iOS 9, tras el prefijo -webkit-backdrop-filter. Chrome añadió la compatibilidad sin prefijo en la versión 76 (julio de 2019), Edge le siguió con el cambio a Chromium en la versión 79, y Firefox 103 la habilitó sin marcador el 26 de julio de 2022. MDN marca la propiedad como Baseline 2024 (recién disponible desde septiembre de 2024), lo que significa que los cuatro motores principales ahora interoperan. La compatibilidad en el mundo real se sitúa en torno al 95 % global. Para cubrir las compilaciones antiguas de Safari (y los usuarios de PostCSS), incluye las declaraciones con y sin prefijo una al lado de la otra, o deja que autoprefixer añada el prefijo a partir de tu configuración de Browserslist.

Una alternativa para los navegadores que no la admiten

Usa una consulta @supports para que los navegadores que no la admitan obtengan una alternativa sólida en lugar de un panel transparente ilegible:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

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

Rendimiento: cuándo usarlo (y cuándo no)

backdrop-filter está acelerado por GPU, pero no es gratis. Cada superficie filtrada obliga al navegador a mantener una capa de composición separada y a volver a muestrear el área que hay detrás del elemento. El borrador del editor del W3C lo reconoce directamente, señalando que los filtros de fondo anidados o apilados pueden provocar «pasadas de renderizado exponenciales», y el anuncio de lanzamiento de WebKit advierte de que la propiedad «obliga al motor a realizar más pasadas de renderizado, lo que tendrá un impacto en el rendimiento». Se aplica el escueto resumen de Web.dev: «backdrop-filter puede perjudicar el rendimiento. Pruébalo antes de desplegar.»

Reglas prácticas: mantén los radios de desenfoque por debajo de ~20px en el código de producción, evita las superficies de cristal de viewport completo (una barra de navegación de cristal que se repinta en cada desplazamiento es el infractor clásico), no apiles muchas superficies filtradas unas sobre otras, y evita backdrop-filter sobre elementos <video> donde el desenfoque tiene que recalcularse en cada fotograma. Microsoft les dice a los usuarios de Acrylic más o menos lo mismo en la documentación de Fluent: «Los efectos de Acrylic se deshabilitan automáticamente cuando un dispositivo entra en el modo de ahorro de batería».

Accesibilidad: la trampa del contraste

El glassmorphism, por definición, reduce el contraste entre el texto y su fondo, porque el «fondo» bajo el panel es ahora lo que sea que haya detrás de él, y eso varía a medida que el usuario se desplaza o cambia el fondo de pantalla. Los mínimos pertinentes de WCAG 2.1 (4,5:1 para el texto de cuerpo normal, 3:1 para el texto grande o en negrita) deben cumplirse frente al fondo del peor caso, no del promedio. Guía práctica: mantén el texto de cuerpo fuera de los paneles de cristal y úsalos principalmente para el armazón de la interfaz (tarjetas, encabezados, modales), donde la lectura real ocurre contra una superficie interior más opaca. Proporciona siempre una variante alternativa opaca para los usuarios que han desactivado la transparencia a nivel del sistema operativo; tanto macOS (Ajustes del Sistema → Accesibilidad → Pantalla → Reducir transparencia) como Windows (Configuración → Personalización → Colores → Efectos de transparencia) exponen el conmutador, y CSS puede detectarlo:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Dónde funciona bien el glassmorphism y dónde no

• Buenos encajes: barras de navegación flotantes sobre imágenes hero, tarjetas de panel sobre un fondo degradado de color, diálogos modales que se superponen a contenido rico, widgets al estilo de la pantalla de bloqueo, superposiciones de vídeo donde el armazón del reproductor se beneficia de suavizar la imagen que hay detrás.
• Arriesgado: contenedores de texto de cuerpo (el contraste varía a medida que el usuario se desplaza), tablas de datos (el ruido visual interfiere con el escaneo de filas), superficies de viewport completo (impacto en el rendimiento), interfaces dirigidas a usuarios con baja visión, salvo que se combinen con una alternativa de transparencia reducida.
• Evita: los botones principales de llamada a la acción (la pérdida de contraste perjudica la conversión), los paneles de error o de advertencia (necesitan la máxima legibilidad), los formularios con mucho texto.

Errores frecuentes

1. Olvidar el fondo transparente. Establecer backdrop-filter en un elemento con un background-color opaco no produce ningún efecto visible: el color opaco cubre la muestra desenfocada. Combínalo siempre con un fondo rgba()/hsla().
2. Cristal sobre un color plano. Si no hay nada interesante detrás del panel, desenfocarlo no produce ningún «cristal», solo un rectángulo ligeramente teñido. El efecto necesita una foto, un degradado o un fondo con movimiento para que se lea.
3. Saltarse el prefijo -webkit-. Las compilaciones antiguas de Safari lo necesitan. O bien incluye ambas líneas o bien confía en autoprefixer.
4. Apilar demasiados paneles. Cada superficie filtrada es su propia capa de GPU. Tres o cuatro suele ser el límite práctico antes de que la velocidad de fotogramas caiga en el móvil.
5. No superar la comprobación de contraste del peor caso. Prueba el panel frente a las zonas más claras y más oscuras de cada fondo sobre el que se vaya a colocar, no solo frente a una captura de pantalla de demostración.
6. Animar el radio de desenfoque. Hacer una transición de backdrop-filter: blur(0) → blur(20px) al pasar el cursor está técnicamente permitido, pero recalcula el desenfoque en cada fotograma y es la forma más fácil de hundir el rendimiento del desplazamiento. Anima opacity o transform en su lugar y deja el desenfoque estático.

Preguntas frecuentes

¿Por qué mi tarjeta de cristal parece un panel plano?

El propio background-color del elemento es totalmente opaco. backdrop-filter desenfoca lo que sea que esté detrás del elemento, pero el elemento se pinta encima. Con un fondo opaco, esa pintura cubre la muestra desenfocada. Cambia a rgba() o hsla() con un 10-30 % de alfa, el punto óptimo para la mayoría de los diseños de glassmorphism.

¿Funcionará en Safari?

Sí, Safari fue el primer navegador en lanzar la propiedad, en agosto de 2015. Las versiones antiguas de Safari necesitan el prefijo -webkit-backdrop-filter; el Safari moderno acepta la forma sin prefijo. Incluir ambas mantiene el mismo CSS funcionando en todas las compilaciones de Safari que siguen en uso activo.

¿Es accesible el glassmorphism?

Solo si diseñas para el fondo del peor caso. WCAG 2.1 requiere una relación de contraste de 4,5:1 para el texto normal y de 3:1 para los componentes de interfaz grandes o en negrita, medida frente a cualquier color que acabe debajo del panel. Proporciona una alternativa opaca bajo la consulta de medios prefers-reduced-transparency para que los usuarios que han desactivado la transparencia a nivel del sistema operativo obtengan una superficie legible.

¿Perjudica el rendimiento?

Puede. Cada superficie filtrada obliga al navegador a mantener una capa de composición separada y a volver a muestrear el área que hay detrás, y los radios de desenfoque grandes o los paneles apilados aumentan el coste. Mantén el radio por debajo de unos 20px, evita los paneles de viewport completo y no lo pongas sobre <video>. La guía oficial de Web.dev es probar en un dispositivo de gama baja representativo antes de publicar.

¿Cuál es la diferencia entre el glassmorphism y el neumorphism?

El neumorphism (acuñado unos meses antes) crea la ilusión de formas en relieve de plástico blando combinando sombras interiores y exteriores sobre el mismo color plano que el fondo de la página, sin transparencia ni desenfoque. El glassmorphism mantiene el fondo de la página visible a través de un panel translúcido y desenfocado. Son estilos complementarios en lugar de rivales, y algunos diseños usan ambos: un botón neumórfico sobre una tarjeta de cristal, por ejemplo.

¿Puedo copiar el CSS para uso en producción?

Sí. La salida es CSS plano que usa propiedades estándar, sin extensiones propietarias ni JavaScript. Suelta la regla en tu hoja de estilos y aplica la clase al elemento que deba parecer de cristal.

Herramientas relacionadas