Fondo con Degradado Animado

Un atractivo fondo degradado animado que transiciona suavemente entre colores, creado únicamente con CSS. Mediante el uso de keyframes para animar la posición del fondo, se logra un efecto de cambio de color fluido y dinámico.

Código de Implementación

Copia y pega el siguiente código para implementarlo en tu proyecto.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Explicación

La magia detrás de este fondo animado se basa en dos conceptos clave:

1. background-size: 400% 400%: Escala el tamaño del fondo a cuatro veces el tamaño del contenedor, haciendo que gran parte del degradado quede fuera del área visible.
2. @keyframes gradient-flow: Anima la propiedad background-position del 0% al 100% y de vuelta al 0%. Esto desplaza el fondo degradado ampliado, creando la ilusión óptica de que los colores cambian y fluyen.

Puedes personalizar fácilmente los colores del linear-gradient o ajustar la duración de la animación (animation-duration) para adaptarlo a la identidad visual de tu sitio web.