code(alpha) » CSS3 box-shadow on left and right sides only

CSS3 box-shadow on left and right sides only

25 Jun, 2011 Tips

It is possible to have inset shadows on both left and right sides of a block. It is a matter of showing only one side of the box-shadow at a time, and so you need two box-shadows (one for each side of the block you wish to have shadows, and we can put both CSS codes in the same property).

Here is an example that should be compatible with Firefox, Chrome and Opera.

box {
    -moz-box-shadow:
        inset 5px 0 5px -5px #333,
        inset -5px 0 5px -5px #333;
    -webkit-box-shadow:
        inset 5px 0 5px -5px #333,
        inset -5px 0 5px -5px #333;
    box-shadow:
        inset 5px 0 5px -5px #333,
        inset -5px 0 5px -5px #333;
}

Here is the result:

Lorem ipsum...

Inspired from Playing with CSS3 box shadow [demente-design.com]

4 Comments so far »

jim said

June 27 2011 @ 9:25 AM

nice, thanks...
Kenneth John Odle said

December 17 2011 @ 8:47 PM

Thank you for this. I have been creating multiple stylesheets for my main web site and I couldn't figure out how to get red inset shadows for the Fourth of July theme. This worked perfectly. Thanks!
Aakil said

January 24 2012 @ 7:01 PM

Used this without the inset.

Thanks for the writeup!
Fractal said

February 14 2012 @ 3:50 PM

If only it works in all browsers...