Can't make a proper gradient fade effect - css

Question

I'm trying to make a gradient overlay in my images, that makes this effect:
As you can see, gradient will be darker at the bottom, BUT, the top WONT be affected by the darkness.
I've tried this:
#include linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(255,255,255,1));
But this will make a whitish effect at the top. I want the gradient to darken only the bottom part of the image, and DON'T do anything to the upper part of the image.
Has anyone know how to do this?
Thanks

Answer 1

You can use the following CSS, 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%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}