CSS3 box-shadow on left and right sides only

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]

16 Comments so far »

  1. jim said

    June 27 2011 @ 9:25 AM

    nice, thanks...

  2. 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!

  3. Aakil said

    January 24 2012 @ 7:01 PM

    Used this without the inset.

    Thanks for the writeup!

  4. Fractal said

    February 14 2012 @ 3:50 PM

    If only it works in all browsers...

  5. Santosh said

    February 23 2012 @ 8:41 AM

    it is very nice but, i want apply it out site of box how can i do?

  6. Curtis said

    March 6 2012 @ 10:16 AM

    I would also like to apply this to the outside (sides only) of the box. Is this possible?

  7. @cartus said

    April 12 2012 @ 5:28 PM

    Curtis,

    Just delete the inset shit :)..

    box-shadow:
    5px 0 5px -5px #333,

  8. Aaron said

    June 13 2012 @ 4:05 PM

    Yes Curtis, just don't put "inset" in your code.

  9. Damon said

    June 20 2012 @ 9:56 AM

    @Santosh & @Curtis -

    To apply this to the outside of a box, simply remove all of the instances of "inset" in the code.

    Thanks for the code!

  10. nK0de said

    September 25 2012 @ 4:03 AM

    Nice snippet! Simple and effective! Thanks :)

  11. jhunalie said

    October 2 2012 @ 7:55 AM

    thanks so much for this! :)

  12. dzulfikar said

    November 4 2012 @ 10:39 PM

    finally I found this trick, using comma :D

  13. nasrin said

    June 14 2013 @ 2:19 AM

    hi
    i want put CSS3 box-shadow on left and right and top and bottom sides.
    please help me.
    tahnks

  14. ujjaini said

    July 8 2013 @ 2:55 PM

    thanks a lot ! only place where i found this solution

  15. helsywarner said

    January 24 2014 @ 2:10 AM

    this code generate one side shadow

    div {
    border:5px solid #4FFFA1;
    padding:30px;
    background:#F6FFA1;
    width:100px;
    box-shadow: 5px 0 2px black;
    }

    http://www.corelangs.com/css/box/round.html

    helsy

  16. bergmann said

    July 3 2014 @ 6:30 PM

    really great tutorial, thank you very much

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: