Box shadows

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.

An inset shadow

The box-shadow property can also be used to create an inset shadow. The syntax is identical to a normal box shadow except that the value starts with the keyword inset:

.inset {
    box-shadow: inset 0 0 40px #000;
}

Everything functions as before but...