Linear fade out div, content and border (solid at top to transparent at bottom)

Question

Possible Duplicate:
Is it possible to graduate the opacity of an HTML element?

I am trying to get a div (and its border and contents) to fade into transparency (ie solid at the top and transparent at the bottom) using css.

Is there a way to do this?

Ive been able to fade the background out with the following:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

but haven't been able to find a way to do it to the content/border of the div as well. perhaps with some kind of nesting or an overlay?

EDIT heres what I was trying to do:

enter image description here

Do you have a monocolor background on the container? Related: http://stackoverflow.com/questions/12664132/is-it-possible-to-graduate-the-opacity-of-an-html-element/12670548#12670548 — Giona, Oct 08 '12 at 10:27
yeah background is a solid colour for both the div and whats underneath it — Not loved, Oct 08 '12 at 10:27
Can you please post a screenshot of what you have and an image of what you're trying to achieve? I find your formulation very hard to figure out. — xception, Oct 08 '12 at 10:28

score 27 · Accepted Answer · edited May 23 '17 at 11:45

Quoting from my answer here:

Check this working demo, and try to add/remove contents from #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}

This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

To generate your own gradient, visit Colorzilla.

The first stop (0%) must have opacity 0 ( rgba(255,255,255,0); ), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1); ).

Works with images, too. See my fork of your fiddle: http://jsfiddle.net/yw9v7zm5/ ... and I didn't have to use your data URI image. — Rowe Morehouse, Apr 06 '15 at 03:50
It should be noted that this doesn't actually fade to transparent, it just mimics this by fading to the same colour as the background. Try changing the body background colour in the fiddle, for example. Also with current browsers you might choose to do this with a pseudoelement instead of an extra div. — Dan, Feb 15 '19 at 13:31
Not really practical if you actually want to select the text though — Cédric Bloem, Jun 18 '19 at 12:36
This is not really fading into transparent. It's fading into white. If you have something below the container div, you will see that. — waldgeist, May 18 '21 at 12:25

xception · Answer 2 · 2012-10-08T10:53:03.420

1

If you know the height you can use that knowledge to your advantage, you can always update it from js though, but this seems a bit simpler to me than defining countless gradients http://jsfiddle.net/6cXRZ/4/ you can adjust your parameters to hide however much you like

edited Oct 08 '12 at 10:53

answered Oct 08 '12 at 10:46

xception

3,966
1
14
25

Linear fade out div, content and border (solid at top to transparent at bottom)

2 Answers2

Linked