DESARROLLADORES

Generador de degradados CSS animados — Vista previa

Crea un degradado CSS animado de tres colores. Ajusta ángulo y duración, pausa y exporta CSS con soporte para movimiento reducido.

Generador de degradados CSS animados — Vista previa

HERRAMIENTA GRATUITA

Color 1#2563ebColor 2#7c3aedColor 3#06b6d4

Ángulo: 135°Duración del ciclo: 10 s

La vista previa y el CSS respetan la preferencia de movimiento reducido. Aplica la clase animated-gradient al elemento.

Código generado

.animated-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed, #06b6d4);
  background-size: 300% 300%;
  animation: toolnoza-gradient 10s ease infinite;
}
@keyframes toolnoza-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
}

Ejemplo

Un degradado azul, violeta y cian a 135° con ciclo de 10 segundos crea un fondo en movimiento.

Preguntas frecuentes

¿Cómo se utiliza esta herramienta?

Elige tres colores, ángulo y duración; copia el CSS y aplica la clase animated-gradient al elemento.

¿Qué límites debo tener en cuenta?

La animación mueve background-position, no los colores. La pausa de la vista previa no cambia el código exportado.

¿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.

Referencia

MDN — CSS animations

Generador de degradados CSS animados — Vista previa

Generador de degradados CSS animados — Vista previa

Ejemplo

Preguntas frecuentes

¿Cómo se utiliza esta herramienta?

¿Qué límites debo tener en cuenta?

Guías prácticas

Herramientas relacionadas

¿Necesito JavaScript para el degradado?

Referencia