Generador de Glassmorphism
Diseña paneles de cristal esmerilado: desenfoque, transparencia, bordes de luz y sombras suaves, con escenas coloridas en vivo detrás del cristal.
Nota: backdrop-filter requiere el prefijo -webkit- para Safari; está incluido en la salida.
Cómo usar el generador de Glassmorphism
- Elige un color de tinte y ajusta la transparencia del panel: valores más bajos se ven más «cristalinos».
- Aumenta el desenfoque para esmerilar el fondo; añade saturación para que los colores detrás del cristal destaquen.
- Añade un borde claro sutil (blanco semitransparente) para simular el brillo del borde del cristal.
- Afina la sombra suave y el radio de esquinas para terminar el efecto flotante.
- Cambia la escena de fondo para probar la legibilidad y luego copia el código CSS o Tailwind.
Acerca de este generador de Glassmorphism
El glassmorphism es un estilo de UI donde los paneles parecen cristal esmerilado: fondo semitransparente, desenfoque del fondo, un borde claro sutil y una sombra suave. Se convirtió en una tendencia de diseño mainstream para tarjetas, barras de navegación y modales. El ingrediente mágico es la propiedad backdrop-filter, que aplica efectos a lo que está detrás del elemento.
Este generador te permite ajustar cada ingrediente — tinte, transparencia, desenfoque, saturación, borde de luz, radio y sombra — sobre tres escenas coloridas de prueba para juzgar el efecto con realismo. La salida incluye el prefijo -webkit-backdrop-filter para Safari. Por accesibilidad, comprueba siempre que el texto sobre el cristal mantenga suficiente contraste sobre fondos cargados.
FAQ de Glassmorphism
¿Qué navegadores soportan backdrop-filter?
backdrop-filter está soportado por todos los navegadores modernos. Chrome y Edge lo soportan sin prefijo; Safari requiere el prefijo -webkit-, que el generador incluye automáticamente. En navegadores muy antiguos el panel simplemente recurre a su fondo semitransparente, que sigue viéndose aceptable.
¿Por qué no se muestra mi efecto de cristal?
backdrop-filter solo funciona cuando hay algo detrás del elemento: una imagen de fondo, un gradiente u otro contenido. Si el elemento está sobre un fondo plano y sólido, el desenfoque no tiene nada que desenfocar. Asegúrate también de que el fondo del panel tenga transparencia (alfa menor al 100%); si no, el fondo queda totalmente cubierto.
¿Para qué sirve la función saturate()?
saturate() intensifica (por encima del 100%) o apaga (por debajo del 100%) los colores del fondo antes del desenfoque. Valores alrededor del 130–180% hacen que los colores detrás del cristal sean vivos y ayudan a que el efecto esmerilado se perciba con claridad: una parte característica del look glassmorphism.
¿El glassmorphism es malo para la accesibilidad?
Puede serlo si el texto se sitúa sobre fondos muy desenfocados y de bajo contraste. Mantén la transparencia moderada, usa el borde de luz para definir los bordes y prueba tu panel sobre el fondo más cargado que vaya a cubrir. Las tres escenas integradas te ayudan a comprobar el contraste antes de publicar.
¿Puedo combinar glassmorphism con Tailwind?
Sí. La pestaña Tailwind emite clases de valor arbitrario (bg-[rgba(...)], backdrop-blur-[12px], etc.) que funcionan con Tailwind CSS v3+ sin configuración.