Question

Let’s say I have a simple div with some paragraphs inside.

I want to achieve a fading effect on the bottom of the div.

---

I have tried to set up a white shadow

box-shadow: inset 0 -15px 10px white;

but obviously this didn’t work, since the box-shadow always appears under the text.

How can I accomplish this in pure CSS?

Thanks.

Answer 1

I was able to replicate the effect with CSS only, but it’s a little hackish:

http://jsfiddle.net/EaXTB/1/

I put two divs as siblings:

<div class="container">
  <div class="shadow"></div> 
  <div class="copy">
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
</div>

And positioned them absolutely:

.container { position:relative; }

.shadow {
  -webkit-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
  box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1);
  height: 200px;
  width: 300px;
  z-index: 100;
  position:absolute;
}

.copy {
  max-height: 200px;
  width: 300px;
  overflow: hidden;
  z-index: 0;
  position: absolute;
}

The only trouble is that for this to work, you must specify the height for the .shadow class. If it will always be the same size, then you can use this. Otherwise using a png overlay might be more effective.

Something like:

.shadow {
  background: url(overlay.png) repeat-x bottom;
}