This solid video explains clearly how to go about creating a drop shadow for a box, as well as a shadow on the inside. Being rather small, you should watch this video in full screen mode for the best experience. It also features Coda (version 1) as the CSS editor, so for those of you wanting to see it in action, this is a good chance to see a couple cool features. Coda 2 was was recently released and has some great new additions, too! For those of you just getting into the world of CSS, this video makes it easy to follow along, and the code used in the tutorial is provided below.
If you start with a basic box div, then all you need to do is add the drop shadow declaration, the vertical and horizontal values and a blur value. You will also need to insert rules for the various browsers so a wide range of viewers will be able to enjoy your drop shadows. And what’s really great about this code, is that it’s easy to place that shadow on the inside of the box rather than the outside. All you need to so is add the word "inset" after your shadow property. Simple as that!
For those of you who want to take it for a spin, here is the code used in the video:
Box Shadow Code:box-shadow: 0px 0px 30px #000;-moz-box-shadow: 0px 0px 30px #000;-webkit-box-shadow: 0px 0px 30px #000;
Note that the three numbers following the "-shadow:" represents the X, Y, and Blur Radius in pixels. The last — "#000" -- is your color you wish to use. Any web safe hex color can be used here.
Also, to make it an inner shadow, simply add "inset" after the "-shadow:" to all shadow rules. for example (-moz-box-shadow:inset 0px 0px 30px #000)