Generador de Glassmorphism
Ajusta una tarjeta con efecto cristal esmerilado —desenfoque, tintado, brillo de borde, redondeo de esquinas y sombra— previsualizada sobre un fondo genuinamente animado para que la calidad del desenfoque se aprecie en movimiento.
🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.
Resultado
backdrop-filter: blur() es la propiedad CSS que produce el aspecto de cristal esmerilado: un panel translúcido que desenfoca lo que se mueve detrás en lugar de limitarse a atenuar un color plano. El problema es que la calidad del desenfoque resulta casi imposible de juzgar frente a una muestra estática; solo convence cuando algo se mueve realmente por debajo, tal y como ocurrirá en una página real con contenido, vídeo o un héroe animado. Este generador sitúa la tarjeta de previsualización sobre un fondo genuinamente animado en lugar de uno quieto, de modo que lo que ves al mover los deslizadores es lo que los visitantes van a experimentar.
El fondo es una animación CSS real: un linear-gradient grande pintado al 400 % del tamaño del elemento, con @keyframes desplazando background-position de un lado a otro en bucle; sin bucle de animación en JavaScript, sin canvas, solo la misma técnica continua de background-position que se usa en secciones hero de producción. El desenfoque, el color y la opacidad del tintado, el color, la opacidad y el grosor del brillo de borde, el radio de las esquinas y la suavidad de la sombra controlan en directo los estilos de la tarjeta flotante, y el cuadro de CSS para copiar refleja exactamente los mismos valores.
No todos los navegadores admiten backdrop-filter, por lo que el generador también emite un bloque real con @supports not (backdrop-filter: blur(1px)); no un gesto simbólico, sino una regla fallback con su propio color de fondo calculado a partir de la opacidad real del tintado. Como la translucidez sin desenfoque se ve notablemente peor (lo que hay detrás se transparenta sin desenfocar), el fallback aumenta automáticamente el canal alfa por encima de la opacidad elegida, y un comentario en el CSS generado explica exactamente por qué y cuánto.
Todo se calcula y se renderiza en tu propio navegador: sin subidas, sin cuentas, sin idas y venidas al servidor. Copia el CSS cuando la tarjeta tenga el aspecto deseado, aplícalo al elemento que quieras que quede sobre una foto, un vídeo o un degradado, y conserva el bloque @supports para que los navegadores antiguos muestren una tarjeta legible y más opaca en lugar de una apenas visible.