Gradient opacity on the bottom of div

Question

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

How can i do it?

score 22 · Accepted Answer · edited Feb 13 '15 at 18:23

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

2 errors in the above code. Extra `` in the HTML and 'position' spelled incorrectly in the `.content` css rule. — Fishz, Apr 16 '14 at 22:12
The jsfiddle doesn't seem to exist anymore. Would it be possible to update that link somehow? — Keara, Jun 21 '18 at 19:58

score 5 · Answer 2 · answered Jan 04 '22 at 20:51

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>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>gradient test</title>
    <meta name="description" content="gradient test">
    <meta name="author" content="Viking">
    <meta name="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>

<div class="content">
    Loriem <a href="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 class="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>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>gradient test</title>
    <meta name="description" content="gradient test">
    <meta name="author" content="Viking">
    <meta name="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>

<div class="content">
    Loriem <a href="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>

score 3 · Answer 3 · answered Sep 06 '13 at 06:39

3

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

answered Sep 06 '13 at 06:39

Yasitha

2,233
4
24
36

score 2 · Answer 4 · answered Sep 06 '13 at 06:41

2

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

answered Sep 06 '13 at 06:41

Michael Schmidt

9,090
13
56
80

score 0 · Answer 5 · answered Sep 30 '18 at 04:02

0

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

answered Sep 30 '18 at 04:02

Tayyab Hayat

815
1
9
22

markvicencio · Answer 6 · 2013-09-06T07:10:22.567

-1

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

edited Sep 06 '13 at 07:10

answered Sep 06 '13 at 06:41

markvicencio

146
1
7

I would use `position: fixed` to stick it to the bottom of the page. – Michael Schmidt Sep 06 '13 at 06:43

Gradient opacity on the bottom of div

6 Answers6

Linked