JSFiddle - React, Tailwind, and code Playground

HTML

<div>zzzzz <br><br><br><br> </div>

CSS

div {
  background: radial-gradient(at top left, purple, crimson, orangered, gold);
  padding: 2em;
  position: relative;
}

div:after {
  content: " ";
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  background: radial-gradient(at bottom left, blue, crimson, green, gold);
  opacity: 0;
  transition: opacity 1s ease-in;
}

div:hover:after {
  opacity: 1;
}