Gradient opacity on the bottom of div

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

How can i do it?

Love Trivedi

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>

With 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 jsfiddle link

Hope you want some thing 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));
}

Just use a image and set it fixed on the bottom.
CSS Tricks have a post about this issue and deliver also the picture.

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

Try this one. It will solve your problem. White and black gradient

.box{
    padding: 15px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(221, 221, 221,0.8)), to(rgba(255, 255, 255,0.2)), color-stop(.5,#fff));
}

You can have an repeating image. For example a 10px height gradient.

position your div to relative :

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

Your image would be position absolute

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

EDIT

Your div also has to have a width so your repeating image will depend on the width of the parent

来源：https://stackoverflow.com/questions/18651345/gradient-opacity-on-the-bottom-of-div

标签

html

css

gradient

opacity