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]
nice, thanks…
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!
Used this without the inset.
Thanks for the writeup!
If only it works in all browsers…
it is very nice but, i want apply it out site of box how can i do?
I would also like to apply this to the outside (sides only) of the box. Is this possible?
Curtis,
Just delete the inset shit :)..
box-shadow:
5px 0 5px -5px #333,
Yes Curtis, just don’t put “inset” in your code.
@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!
Nice snippet! Simple and effective! Thanks 🙂
thanks so much for this! 🙂
finally I found this trick, using comma 😀
hi
i want put CSS3 box-shadow on left and right and top and bottom sides.
please help me.
tahnks
thanks a lot ! only place where i found this solution
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
really great tutorial, thank you very much