JSFiddle - React, Tailwind, and code Playground

HTML

<div class="transparent">White to transparent</div>
<div class="force-white">White to transparent white</div>

CSS

body { background-color: #cecece; font-family: Georgia; width: 50%; margin: 5em auto; }

.transparent, .force-white {
    width: 12em;
    height: 4em;
}

div + div { margin-top: 1em; }

.transparent {
    background-image: -webkit-linear-gradient(left, #fff, transparent);
    background-image:    -moz-linear-gradient(left, #fff, transparent);
    background-image:     -ms-linear-gradient(left, #fff, transparent);
    background-image:       o-linear-gradient(left, #fff, transparent);
    background-image:         linear-gradient(left, #fff, transparent);
}

.force-white {
    background-image: -webkit-linear-gradient(left, #fff, rgba(255,255,255,0));
    background-image:    -moz-linear-gradient(left, #fff, rgba(255,255,255,0));
    background-image:     -ms-linear-gradient(left, #fff, rgba(255,255,255,0));
    background-image:       o-linear-gradient(left, #fff, rgba(255,255,255,0));
    background-image:         linear-gradient(left, #fff, rgba(255,255,255,0));
}