css - Can't make a proper gradient fade effect -

css - Can't make a proper gradient fade effect -

i'm trying create gradient overlay in images, makes effect:

as can see, gradient darker @ bottom, but, top wont affected darkness.

i've tried this:

@include linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(255,255,255,1));

but create whitish effect @ top. want gradient darken bottom part of image, , don't upper part of image.

has know how this?

thanks

you can utilize next 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 */ }

css linear-gradients