Skip to content Skip to sidebar Skip to footer
Home / Css / Gradient / Html / Opacity

Gradient Opacity On The Bottom Of Div

Post a Comment
I would like to create effect like on this image - gradient opacity on the bottom of content: How can i do it?

Solution 1:

You can use this HTML

<divclass="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><divclass="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

Solution 2:

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));
}

Solution 3:

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

Solution 4:

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));
}

Solution 5:

I know this is older but JIC someone finds this looking for a solution. The accepted answer from Love Trivedi is good but still has a few problems. Using absolute positioning is ok but to cover the div; it's suggested to also use top: 0px and right: 0px. there are also extra zeros in the filter, the start should be startColorstr='#89fff1' to stay consistant with the other starting colors.

There are also 2 downsides to this solution. First it doesn't allow for selecting the underlying text so you would need a pointer-events: none; in the gradientback class to allow selecting the text. The second problem is this solution fades to a color so you have to be sure your second color matches the page background to get the desired effect. This uses an overlay DIV so fading that to transparent wouldn't do anything to the visual of the content DIV.

here is an updated jsfiddle with the suggested changes and a link on the first text line so you can test the pointer-events option.

.

A more modern solution would be to use the CSS3 mask-image. jsfiddle example for solution 2.

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);

it has less support for older browsers but actually fades the container to transparent allowing for any variety of page backgrounds while still maintaining the desired effect.

.

here is updated HTML for the first solution in case jsfiddle gives you problems

<!doctype html><htmllang="en-us"><head><metacharset="utf-8"><title>gradient test</title><metaname="description"content="gradient test"><metaname="author"content="Viking"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><style>body {
    background: #000;
}
.content {
    width: 500px;
    height: 300px;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.gradientback {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    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='#89fff1', endColorstr='#000000', GradientType=0); /* IE6-9 */
}
</style><divclass="content">
    Loriem <ahref="https://google.com"target="google">ispsum</a> is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br><divclass="gradientback"></div></div></body></html>

and the modern solution. You don't need the inner DIV, just add the mask-image lines to the content class.

<!doctype html><htmllang="en-us"><head><metacharset="utf-8"><title>gradient test</title><metaname="description"content="gradient test"><metaname="author"content="Viking"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><style>body {
    background: #000;
}
.content {
    width: 500px;
    height: 300px;
    position: relative;
    color: #fff;
    overflow: hidden;

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
</style><divclass="content">
    Loriem <ahref="https://google.com"target="google">ispsum</a> is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br>
    Loriem ispsum is simpaly dummy text<br></div></body></html>

Post a Comment for "Gradient Opacity On The Bottom Of Div"