Box shadows allow you to create a box-shaped shadow around the outside or inside of the element it is applied to. Once text shadows are understood, box shadows are a piece of cake; principally, they follow the same syntax: horizontal offset, vertical offset, blur, spread (we will get to spread in a moment), and color.
Only two of the possible four length values are required (in the absence of the last two, the value of color defines the shadow color and a value of zero is used for the blur radius). Let's look at a simple example:
.shadow { box-shadow: 0px 3px 5px #444; }
The default box-shadow
is set on the outside of the element. Another optional keyword, inset
allows the box-shadow
to be applied inside the element.