Question

So I’ve been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I’m trying to use it for the top and bottom only and not for the left/right sides. But it’s not working. I’m using it on a overflow: auto <div> so that it can scroll and have a nice effect.

Here’s my css:

#content {
    font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif; 
    line-height:1.2em;
    height: 400px;
    width: 500px;
    overflow: auto;
    float: right;
    padding: 0 10px;

    -moz-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    -webkit-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}

Answer 1

You have a black shadow on a black background so naturally, you’re not going to see anything. Turning off your black background, we can see the shadows just fine…

http://jsfiddle.net/sparky672/p3Mgn/1/show

So you just need to select different shadow colors. Here are your shadows changed to white #fff…

Full Size Demo

http://jsfiddle.net/sparky672/p3Mgn/3/

-moz-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;

EDIT in response to OP’s comments:

The browser is only given two colors to use in order to render a shadow.

1) The background image’s color (or just background color in this case)

2) The shadow color

Wherever they’re both the same, the shadow will be invisible.

To have a blurry effect using a black background, perhaps try #444 for the shadow… it looks pretty good I think…

http://jsfiddle.net/sparky672/p3Mgn/5/show/