How to apply a fade away effect (not animation) across all the content of a div?

Question

I'd like to have some css or other technique that let's me vertically fade the contents of a div from normal appearance at the top to completely white (or whatever color) at the bottom. Not an animation, just a static effect.

I have found ways to fade a background, e.g. Colorzilla's Gradient Editor

But I would like this effect to apply to all contents of a div (text, images, etc.), like an overlay. If I have to make it fixed width, that is possible. If I really have to fix the vertical height, that could be hacked somehow I guess. I would prefer it to be flexible in the width and height.

Answer 1

You can do this with CSS (without an image or extra markup) using a ::before pseudo-element for the overlay, and linear-gradient for the fade with rgba() opacity from 0 to 1. This assumes you don't need to click on the elements in the <div> individually, since the overlay prevents that.

Demo: http://jsfiddle.net/ThinkingStiff/xBB7B/

Output:

CSS:

#overlay {
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

HTML:

<div id="overlay">
    <span>some text</span><br />
    <img src="http://thinkingstiff.com/images/matt.jpg" width="100" /><br />
    <p>some more text</p>
</div>

Answer 2

I would create a transparent PNG that fades from white to transparent. Like this: http://cl.ly/2i3x1Y3k0N181f3N1w0l

You can then use CSS to place this over the content.

.fadeDiv {
  position:absolute;
  width:100%;
  bottom:0;
  background:url(fadeImg.png) repeat-x 0 0;
}

Alternatively, you can use a CSS3 gradient background in lieu of an image.