JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  Some text here
</div>

CSS

.block {
  position: relative;
  
  width: 200px;
  height: 200px;
  
  transition: background-image 2s;
  
}

.block::before {
  content: '';
  
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  
  display: block;
  width: 100%;
  height: 100%;
  
  background-image: linear-gradient(blue 25%, green 75%);
}

.block::after {
  content: '';
  
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  
  display: block;
  width: 100%;
  height: 100%;
  
  background-image: linear-gradient(yellow 30%, red 90%);
  
  transition: opacity 2s;
}

.block--next::after {
  opacity: 0;
}

JavaScript

setInterval(() => {
	document.querySelector('.block')
  .classList.toggle('block--next');
}, 3000);