JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gradient-bg">
  <img src="http://www.marc.ineshamard.com/wp-content/uploads/2018/10/Le-Soleil_2011_Humaniser-le-paysage.jpg">
  <span>Hello There</span>
</div>

CSS

.gradient-bg{
    display: inline-block;
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );

}
span{
  position: absolute;
  top: 183px;
}
img{
  position:relative;
  z-index:-1;
  display:block;
  height:200px; width:auto;
}