JSFiddle - React, Tailwind, and code Playground

by vals

HTML

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

CSS

div {
    height: 100px;
    width: 100px;
}
#greater {
    height: 200px;
    width: 200px;
 
}
.gradient {
    background: -webkit-linear-gradient(left, lightgray,white);
    background: -moz-linear-gradient(left, lightgray,white);
    background: -o-linear-gradient(left, lightgray,white);
    background: linear-gradient(left, lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
          -moz-background-size: 200% 100%;
        -o-background-size: 200% 100%;
        -webkit-background-size: 200% 100%;
        background-size: 200% 100%;
 
 
    cursor: pointer;
}

.gradient:hover {
    background-position: 100%;
}