Generador CSS glassmorphism (backdrop-filter, Tailwind)

Cree un efecto de vidrio esmerilado: desenfoque, transparencia, saturación, borde y sombra, con vista previa en degradado y código CSS o Tailwind.

El efecto glassmorphism en CSS

El glassmorphism combina un fondo semitransparente, un desenfoque de lo que hay detrás con backdrop-filter: blur() y un borde claro y fino. Un ajuste habitual: desenfoque de 10 a 20 px, fondo blanco con 15-30 % de opacidad y saturación del 120 al 180 %. Añada -webkit-backdrop-filter para Safari.

Las propiedades

  • background: rgba(255, 255, 255, 0.25): el tinte del cristal.
  • backdrop-filter: blur(16px) saturate(140%): desenfoca y aviva lo que hay detrás.
  • border: 1px solid rgba(255, 255, 255, 0.3): el borde fino que recorta la tarjeta.
  • box-shadow: separa la tarjeta del fondo.

Ejemplo

Una tarjeta con un 25 % de blanco opaco y un desenfoque de 16 px sobre un degradado violeta-rosa mantiene legible el texto blanco si el fondo es lo bastante oscuro; sobre un fondo claro, use texto oscuro o suba la opacidad.

Accesibilidad y límites

El contraste depende de lo que pasa detrás del cristal: busque 4,5:1 para el texto normal y 3:1 para el texto grande y los componentes de interfaz. La herramienta estima este contraste a partir de un color medio del fondo, no píxel a píxel. backdrop-filter es costoso en dispositivos modestos: evite aplicarlo a superficies grandes y prevea un fondo opaco de reserva.

Fuentes y fechas: WCAG 2.2, Recomendación del W3C publicada el 5 de octubre de 2023 (versión consolidada del 12 de diciembre de 2024 consultada): criterio 1.4.3 (nivel AA), contraste de al menos 4,5:1 para el texto, 3:1 para el texto grande (18 puntos, o 14 puntos en negrita); criterio 1.4.11, 3:1 para los componentes de interfaz. Compatibilidad de backdrop-filter: Chrome 76, Edge 79, Firefox 103, Safari 9 con el prefijo -webkit- y sin prefijo desde Safari 18; MDN lo clasifica como «Baseline 2024, recién disponible» desde septiembre de 2024. Los números de versión proceden de web.dev y conviene contrastarlos con MDN y caniuse (verificado el 14/10/2026)

Preguntas frecuentes

¿Cómo crear un efecto glassmorphism en CSS?

Combine un fondo semitransparente (rgba(255,255,255,0.25)), backdrop-filter: blur(16px) y un borde de 1 px al 30 % de opacidad. Sin un fondo de color o una imagen detrás del elemento, el efecto no se ve.

¿Por qué backdrop-filter no funciona en Safari?

Las versiones antiguas de Safari exigen el prefijo -webkit-backdrop-filter. El generador añade ambas declaraciones; el elemento también necesita un fondo parcialmente transparente para que se vea el desenfoque.

¿Es accesible el glassmorphism?

Solo si el contraste del texto alcanza 4,5:1 (WCAG) con cualquier fondo. Aumente la opacidad del fondo o el desenfoque y pruebe con el fondo real.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.