18/09/2014 Development / css

Analizando um código do google, me interessei por esse efeitozinho.

<div></div>

div {
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
-webkit-mask-box-image: -webkit-gradient(linear,left top,right top,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
border-top: 1px solid rgba(0,0,0,0.4);
height: 8px;
opacity: 0;
position: absolute;
width: 100%;
z-index: 300;
top: 69px;
opacity: 1    
}

Uma parada maneira é ir diminuindo a opacidade.

http://jsfiddle.net/yhhf8rqy/