Voici un magnifique arrière-plan dégradé animé offrant des transitions de couleurs fluides, entièrement conçu en CSS. En exploitant les animations d’images-clés (@keyframes) pour modifier la position de l’arrière-plan, ce composant crée des variations chromatiques tout en douceur.

Code

Copiez et collez le code ci-dessous pour l’intégrer à votre projet.

<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%;
  }
}

Explication

Cet arrière-plan animé repose sur deux points clés :

1. background-size: 400% 400% : Agrandit le dégradé à quatre fois la taille de l’élément, le faisant ainsi déborder de la zone visible.
2. @keyframes gradient-flow : Déplace de manière fluide la background-position de 0% à 100%, puis la ramène à 0%. Le dégradé élargi semble ainsi glisser, créant l’illusion d’un changement de couleurs.

N’hésitez pas à le personnaliser en ajustant les couleurs du linear-gradient ou la durée de l’animation (en secondes) pour qu’il s’accorde parfaitement avec le thème de votre site.