CSS Shadow on oposite place

Question

Im trying to get this shadow to the inner and on the bottom of my box, but I can't get it to work. Is there anyone who have a good explanation on how to do this and can help me out?

-moz-box-shadow:0 5px 5px rgba(128,128,128,0.1);
-webkit-box-shadow: 0 5px 5px rgba(128,128,128,0.1);
box-shadow: 0 5px 5px rgba(128,128,128,0.1);

Answer 1

Could you do something like this? It leaves a tiny gap on the left and right hand sides though...

-webkit-box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);
   -moz-box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);
        box-shadow: inset -1px 3px 3px rgba(255,255,255,1),
                    inset 1px 3px 3px rgba(255,255,255,1),
                    inset 0px -3px 3px rgba(0,0,0,0.3);

Or alternatively, you could try something like this (simulating the inset with multiple regular box-shadows):

-webkit-box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);
   -moz-box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);
        box-shadow:     0 1px 3px rgba(255,255,255,0.5),
                        0 2px 3px rgba(255,255,255,0.5),
                        0 3px 0px rgba(0,0,0,0.3);

Unfortunately, this also has the caveat of a white glow from the cancelling shadows.

Answer 2

Something like that maybe?

-moz-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);
-webkit-box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);
box-shadow: inset -5px -5px 5px 5px rgba(128,128,128,0.1);