JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gradient">
    <div class="upper"></div>
    <div class="lower"></div>
</div>

CSS

div {
    position: absolute;
    width: 300px;
    height: 300px;
}

#gradient {
    background: green;
}

#gradient > .upper {
    z-index: 101;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
}

#gradient > .lower {
    z-index: 100;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
}