Box shadows

Box shadows allow you to create a box-shaped shadow around the outside or inside of an element. Once you understand text shadows, 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 four length values are required. In the absence of the last two length values, a value of zero is assumed. Let’s look at a simple example:

.shadow {
  box-shadow: 0 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.

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 the inset part of the declaration instructs...