JSFiddle - React, Tailwind, and code Playground

by s_light

HTML

<div class="gradient"></div>
<div class="gradient" id="greater"></div>

CSS

div {
    height: 100px;
    width: 100px;
}
#greater {
    height: 200px;
    width: 200px;
 
}
.gradient {
    background: linear-gradient(to bottom,  orange 0%, blue 50%, orange 100%);
    transition: background 1s ease-in-out;
    background-size: 100% 200%;
    background-position: 50% 100%;
  
    cursor: pointer;
}

.gradient:hover {
    background-position: 50% 200%;
}