ToolnozaEntender el movimiento
El degradado es un fondo CSS ampliado al 300 %. Los keyframes mueven background-position hacia un lado y de vuelta, dando la impresión de que fluyen los colores.
El ángulo define la dirección del degradado. La duración es el ciclo completo de ida y vuelta. Empieza con 10 segundos; colores similares suelen crear un efecto más suave.
Aplicar el CSS
Copia el estilo y añade class="animated-gradient" al elemento. La clase pinta el fondo, pero no crea contenido, altura ni color de texto. Un elemento vacío sin altura puede ser invisible.
Pausar solo detiene la vista previa. Para detener el código exportado, elimina la declaración de animación o usa animation: none. Cambia nombres de clase y keyframes si ya existen en tu sitio.
Revisar legibilidad y movimiento
El CSS incluye prefers-reduced-motion para ofrecer un fondo estático a quienes lo soliciten. Conserva la regla y comprueba que otros estilos no la sobrescriban.
Revisa el texto sobre todos los colores del fondo. Un comprobador de contraste analiza pares, no la animación completa. Un panel de texto uniforme mejora la previsibilidad. Prueba también el rendimiento en móviles.
Usar la herramienta
Elige tres colores, ángulo y duración; copia el CSS y aplica la clase animated-gradient al elemento.
Ejemplo práctico
Un degradado azul, violeta y cian a 135° con ciclo de 10 segundos crea un fondo en movimiento.
¿Necesito JavaScript para el degradado?
No. El código usa keyframes CSS y una consulta de medios. El elemento debe tener dimensiones o contenido para mostrar el fondo.