Я думаю, что все зависит от ситуации, где его использовать надо.
Мое решение было таким(сайт имеет белый фон):

h1{
font-size: 50px;
text-align: center;
position: relative;
line-height: 1;
margin-bottom: 20px;
}

h1:before{
content: "";
display: block;
height: 50px;
position: absolute;
left: 0;
top: 0;
width: 100%;
background: -webkit-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -moz-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -ms-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -o-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
}

Пример можно посмотреть например тут