JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

#test {

  border-radius: 15px;

    width: 600px;

    height: 200px;

    box-shadow: 0px 0px 10px black;  
    background: -webkit-linear-gradient(left, 
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.9) 100%
              ) rgba(0, 0, 0, 1);
    -webkit-transition: all 2s;  
}

#test:hover {
    background: -webkit-linear-gradient(left, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);
}