If you're looking to create a cool gradient effect with CSS, check out this code snippet: http://jsfiddle.net/3sxd82nf/5/
<div id="test">x</div>
<div id="gradient"></div>
#test {
position:absolute;
top: 10px;
left: 0px;
width: 200px;
height: 200px;
background-image: url('http://images2.layoutsparks.com/1/198321/50s-diner-chick-squares.jpg');
}
#gradient {
position:absolute;
top: 10px;
left: 0px;
width: 200px;
height: 200px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000',GradientType=0);
}