Generador de glassmorphism CSS

¿Qué es Generador de glassmorphism CSS?

El generador de glassmorphism CSS es un editor visual gratuito del estilo de interfaz de cristal esmerilado (glassmorphism), pensado para desarrolladores front-end y diseñadores de producto. Ajusta el desenfoque, la transparencia de la superficie, la saturación del color, el grosor del borde, el radio de las esquinas y la intensidad de la sombra con campos numéricos y deslizadores, y luego elige un color de tinte con la muestra. Un panel de vista previa muestra el cristal sobre un fondo degradado vivo en tiempo real, y se genera el CSS completo —con backdrop-filter, un fondo semitransparente, un borde sutil y un box-shadow— para que lo copies. Úsalo para crear tarjetas, barras de navegación, modales y superposiciones de cristal sin ajustar a mano el alfa rgba ni recordar el prefijo -webkit-backdrop-filter.

Cómo usar Generador de glassmorphism CSS

1. Ajusta el Desenfoque (en px) para controlar cuánto se esmerila la zona detrás del panel.
2. Baja la Transparencia para que el cristal sea más translúcido, o súbela para una superficie más sólida.
3. Sube la Saturación por encima del 100% para que los colores del fondo resalten a través del cristal.
4. Elige un color de tinte con la muestra y ajusta el ancho del Borde, el Radio y la Sombra para rematar el aspecto.
5. Observa cómo la vista previa se actualiza sobre el fondo en tiempo real al cambiar cada valor.
6. Copia el CSS generado en tu hoja de estilos: ya incluye el prefijo de respaldo -webkit-backdrop-filter.

Ejemplos

desenfoque 12, transparencia 25%, saturación 120%, radio 16, borde 1, sombra 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

desenfoque 8, transparencia 60%, saturación 100%, radio 0, borde 1, sombra 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

tinte #0f172a, desenfoque 20, transparencia 30%, saturación 140%, radio 24, sombra 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Preguntas frecuentes

¿Qué hace backdrop-filter?

backdrop-filter aplica efectos gráficos —aquí desenfoque y saturación— a lo que haya detrás del elemento, que es lo que crea el aspecto de cristal esmerilado. El generador escribe tanto backdrop-filter como el prefijo -webkit-backdrop-filter para que funcione en varios navegadores, además de un fondo semitransparente, un borde y una sombra.

¿Por qué hay un control de transparencia?

El efecto de cristal necesita un fondo parcialmente translúcido para que se vea el fondo desenfocado. El deslizador de Transparencia ajusta el alfa del color de fondo del panel (rgba): los valores bajos son más transparentes y los altos más opacos y sólidos.

¿Puedo usar un cristal de color u oscuro?

Sí. Elige cualquier color de tinte con la muestra: la herramienta lo mezcla en el fondo rgba, así que puedes hacer cristal cálido, frío u oscuro. Combina un tinte oscuro con más transparencia para superposiciones sobrias, o mantenlo blanco para un panel esmerilado clásico.

¿Funcionará en todos los navegadores?

La mayoría de los navegadores modernos admiten backdrop-filter. El CSS generado incluye el prefijo -webkit-backdrop-filter para Safari y Chromium antiguo, pero los navegadores muy antiguos lo ignoran y simplemente muestran el fondo semitransparente sin el desenfoque.

¿Se suben mis datos a algún sitio?

No. El generador se ejecuta por completo en tu navegador con JavaScript: tus colores y valores nunca se envían a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.