Generador de Glassmorphism CSS

Esta herramienta crea un efecto CSS de vidrio esmerilado (glassmorphism) combinando un fondo semitransparente con backdrop-filter: blur() — arrastra los controles sobre la vista previa de colores para ver cómo la tarjeta de vidrio desenfoca lo que hay detrás, y luego copia el CSS. También genera el prefijo -webkit-backdrop-filter que Safari necesita, ya que backdrop-filter todavía lo requiere ahí.

¿Qué es esta herramienta?

El glassmorphism es un estilo de interfaz en el que un elemento parece vidrio esmerilado: un fondo semitransparente deja entrever los colores que hay detrás, mientras que backdrop-filter: blur() desenfoca ese fondo para que se lea como vidrio y no como un simple panel transparente. Un borde fino y semitransparente junto con esquinas redondeadas suelen completar el aspecto.

Esta herramienta te permite construir ese efecto de forma visual. La vista previa se sitúa sobre un fondo degradado en movimiento precisamente para que el desenfoque sea visible — el glassmorphism solo se lee correctamente sobre algo con color o detalle detrás, no sobre una página blanca lisa. Ajusta la opacidad del color de fondo, la intensidad del desenfoque, la opacidad del borde y el radio de las esquinas, y luego copia el CSS generado.

Fuente: Filter Effects Module Level 1, W3C — define backdrop-filter, la propiedad en la que se basa este efecto.

¿Por qué utilizarlo?

Vista previa en vivo sobre un fondo animado y colorido, para que puedas ver realmente el efecto de vidrio esmerilado en lugar de adivinar valores de desenfoque contra un fondo en blanco.
Control total sobre la opacidad del fondo, la intensidad del desenfoque, la opacidad del borde y el border-radius en un solo lugar.
Genera automáticamente tanto backdrop-filter como el prefijo -webkit-backdrop-filter, para que no te olvides del soporte en Safari.
Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio.
Gratis, sin registro, funciona en móvil.

Cómo utilizarlo

Elige un color de fondo y ajusta su opacidad — una opacidad baja (10–25 %) se lee como vidrio; una opacidad más alta parece más un panel sólido con tinte de color.
Aumenta la intensidad del desenfoque para difuminar lo que hay detrás del elemento — esto es lo que realmente crea el aspecto de vidrio esmerilado, distinto de la propia transparencia.
Ajusta la opacidad del borde para añadir un sutil borde claro, lo que ayuda a que la tarjeta de vidrio se lea como una superficie diferenciada en lugar de mezclarse con el fondo.
Define el border-radius para las esquinas redondeadas — las tarjetas de glassmorphism casi siempre son redondeadas, raramente tienen esquinas rectas.
Copia el CSS generado y pégalo en tu hoja de estilos. Recuerda que el elemento necesita algo con color o textura detrás — el glassmorphism es invisible sobre un fondo plano de un solo color.

Ejemplo

Entrada

Fondo: blanco al 20 % de opacidad · Desenfoque: 10px · Opacidad del borde: 30 % · Radio: 16px

Resultado

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Un estilo clásico de tarjeta de vidrio esmerilado usado en paneles de inicio de sesión, barras de navegación y widgets de dashboard sobre un fondo colorido o fotográfico.

Soporte en Safari y otros navegadores

backdrop-filter es compatible con las versiones actuales de Chrome, Firefox, Edge y Safari, pero Safari históricamente ha requerido el prefijo -webkit-backdrop-filter junto con la propiedad sin prefijo para renderizar el desenfoque — sin él, las versiones antiguas de Safari ignoran silenciosamente el desenfoque y solo muestran el fondo plano transparente. Por eso esta herramienta siempre genera ambas declaraciones.

Consulta la documentación de backdrop-filter en MDN para conocer los detalles actuales de compatibilidad entre navegadores: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Por qué el glassmorphism necesita algo detrás

backdrop-filter solo desenfoca lo que está visualmente detrás del elemento — una imagen de fondo, un degradado, otro elemento con color, o contenido que se desplaza por debajo. Sobre un fondo blanco liso o de un solo color no hay nada que desenfocar, así que el efecto es invisible y el elemento simplemente parece una caja redondeada con un ligero tinte. Coloca siempre los elementos de glassmorphism sobre un degradado, una foto o un fondo con detalle para que el efecto se aprecie.

Combinarlo con otros efectos CSS

Las tarjetas de glassmorphism suelen combinarse con un box-shadow sutil debajo para dar más profundidad. Genera aquí el CSS de vidrio esmerilado y añade después una sombra suave con el Generador de Box Shadow, aplicando ambas declaraciones al mismo elemento.

→ Generador de Box Shadow · Generador de Border Radius

Preguntas frecuentes

¿Por qué no aparece el efecto de vidrio en mi página?

backdrop-filter desenfoca lo que hay detrás del elemento. Si tu elemento está sobre un fondo blanco liso o de un solo color, no hay nada visualmente interesante que desenfocar, así que simplemente se ve como una caja con un ligero tinte. Colócalo sobre un degradado, una imagen u otro fondo con detalle para que el efecto de vidrio esmerilado sea visible.

¿Necesito el prefijo -webkit-backdrop-filter?

Sí, si quieres que el efecto se renderice de forma fiable en Safari. Esta herramienta siempre genera tanto el backdrop-filter estándar como la versión con el prefijo -webkit- juntas, ya que Safari históricamente ha necesitado el prefijo para aplicar el desenfoque.

¿Cuál es la diferencia entre la opacidad del fondo y el desenfoque?

La opacidad del fondo controla cuánto se ve tu color de tinte elegido frente a cuánto se ve, sin alterar, lo que hay detrás. El desenfoque controla cuánto se difumina/suaviza ese fondo visible. El glassmorphism usa ambos a la vez — algo de transparencia más algo de desenfoque — en lugar de uno solo.

¿Puedo usar backdrop-filter en cualquier elemento?

Sí, pero solo afecta a lo que está visualmente detrás de ese elemento dentro del renderizado de la página, no a los hijos del propio elemento. También tiene un coste de rendimiento en algunos dispositivos cuando se aplica a muchos elementos o se anima con frecuencia, así que es mejor usarlo en un número reducido de superficies destacadas de la interfaz, como tarjetas, modales o barras de navegación, en lugar de en decenas de elementos pequeños.

¿Por qué apenas se ve mi borde?

El borde de esta herramienta usa un blanco semitransparente, pensado para ser sutil — un borde claro que ayuda a que el panel de vidrio se lea como una superficie diferenciada sin parecer un contorno duro y opaco. Sube el control de opacidad del borde si quieres un borde más visible.