CSS Box-shadow
A new feature in CSS3 is the ability to add drop-shadow (box-shadow) effects. In CSS2 it was necessary to use JavaScript or images to add such features. The box-shadow property is new and will only work in current browsers.
Syntax
box-shadow:x, y, blur, spread #color;
Each browser has its own way of adding drop-shadow, however you do need to add a prefix for some browsers.
Syntax Firefox
-moz-box-shadow:x, y, blur, spread #color;
Syntax Webkit browsers (Chrome, Safari)
-webkit-box-shadow:x, y, blur, spread #color;
Inset
The box-shadow property also supports inset value, which makes the box-shadow appear inside instead of outside.
Examples – Box-shadow
In the examples below we have only provided the box-shadow code; you can add the moz or webkit prefix.
Example A
box-shadow: 0px 0px 30px #000;
Example B
box-shadow: 0px 0px 5px 2px #000;
Example C
box-shadow: 5px 0px 5px 2px #000;
Example D
box-shadow: 3px 5px 5px 2px #000;
Example E
box-shadow: -30px 0px 100px 2px #f00;
Example F
box-shadow: 30px -50px 100px 2px #B1BA04;
Example G
box-shadow: inset 0px 0px 30px 5px #000;
Example E and F are quite different. Giving x a negative value will make the box-shadow float right, while giving it a positive does the opposite. Giving y a negative value makes the box-shadow move to the top, while giving it a positive value will do the opposite. Example G uses the inset value.