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.

If I am using the wrong terminology, please correct me. If this is meant for another stack exchange site, please let me know also. I checked graphic design, but it seemed more like a photoshop kind of thing. — KobeJohn, Feb 09 '12 at 02:03
Wow. I thought it was impossible, but you all had several different answers. Please give me time to try them and then I'll upvote and select. — KobeJohn, Feb 09 '12 at 04:16

ThinkingStiff · Accepted Answer · 2012-02-09T05:37:06.903

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:

enter image description here

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>

The css in the demo that you linked is working perfectly so far. However the css as it is in this post didn't work (chrome on ubuntu if that matters). If you can update this answer to reflect that css, I'll select it as the solution. Many many thanks. — KobeJohn, Feb 09 '12 at 05:35
@yakiimo I usually leave out vendor specific prefixes in my answer (for brevity), but I have added them for you. — ThinkingStiff, Feb 09 '12 at 05:37

score 1 · Answer 2 · answered Feb 09 '12 at 02:12

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.

score 1 · Answer 3 · edited May 23 '17 at 12:16

I would use CSS to create an overlay (this is a fixed option - but it depends if you want it to be scrollable or not - if so, use position:absolute;):

div.Overlay {
  width:100%; height:100%; 
  z-index:10;
  top:0; left:0; 
  position:fixed; }

<body>
  <div class="Overlay Gradient"></div>
  Any Content You like here...
</body>

And then apply styling as explained here to the overlay class: CSS Transparency + Gradient

.Gradient{
/* webkit example */
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)
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);
}

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

3 Answers3

Linked

Related