JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<div class="gradient-box"></div>

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #ff6b6b, #556270); /* Initial gradient */
  transition: background 5s; /* Transition duration */
}

/* Keyframes for animation */
@keyframes changeGradient {
  0% {
    background: linear-gradient(to right, #ff6b6b, #556270); /* Initial gradient */
  }
  100% {
    background: linear-gradient(to right, #4ca1af, #c4e0e5); /* Final gradient */
  }
}

/* Apply animation on the gradient-box */
.gradient-box.animate {
  animation: changeGradient 15s forwards; /* Apply animation */
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const gradientBox = document.querySelector('.gradient-box');
  gradientBox.classList.add('animate');
});