JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imagegradient"><img src="http://www.kitch.ro/gradiant.png" width="255" height="255" /></div>
<p>Transparent PNG inage gradient - Good</p>


<div id="white_grad"><div id="black_grad"></div></div>
    <p>CSS3 Gradient</p>

CSS

body {
    background:#dd0000;
}

#imagegradient {
    width:255px;
    height:255px;
    border:1px solid #333;
}

#white_grad {
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(169, 219, 129, 1)) repeat scroll 0 0 transparent;
    height:255px;
    width:255px;
}
    
#black_grad {
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent;
    border:1px solid #333333;
    height:255px;
    width:255px;
}