Gradient transparency at the bottom of the div

Question

I would like to create an effect like in this image - the opacity of the gradient at the bottom of the content:

How can i do this?

Answer 1

You can use this html

<div class="content"> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> <div class="gradientback"> </div> </div> 

Using this CSS

 body{background:#000;} .content{ width:500px; height:300px; position:relative; color:#fff; overflow:hidden; } .gradientback{ position:absolute; bottom:0px; left:0px; width:100%; height:50px; background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } 

Here is the jsfiddle link

Answer 2

Hope you want something like this .

 div { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333)); } 

Answer 3

Just use the image and set it at the bottom.
CSS Tricks reports this issue and also delivers an image.

Or, if you want it using CSS, follow this article which shows how to do it using CSS and JavaScript

Answer 4

You may have a duplicate image. For example, a height gradient of 10 pixels.

put your div in relative:

 /* Example width*/ div { position : relative; width : 500px; } 

Your image will be an absolute position

 #gradientImage { height : 10px; background : url(path/to/image.png) repeat x; position : absolute; bottom : 0; } 

EDIT

Your div must also have a width so that your repeating image depends on the width of the parent