The first method of making a recessed drop shadow – providing an HTML element with the appearance that it is lifted from the page – is achieved by using providing the box-shadow property with a value that is largely unknown, or at least overlooked: spread.

First, let’s apply a standard drop shadow, simulating a light from above:

article {
	box-shadow: 0 10px 9px rgba(0,0,0,0.35);
}

This shadow for <article> elements has no horizontal displacement, a vertical offset of 10 pixels, and a 9 pixel blur. The problem is that it drops straight down, where we want it to be pulled in from the edges.

There is an optional value, referred to as spread, that can be applied after the blur value. If spread is given a a positive value, it bloats the drop shadow outwards:

article {
	box-shadow: 0 10px 9px 10px rgba(0,0,0,0.35);
}

In the CSS above, the shadow will grow by 10 pixels on all sides. This is useful if we were trying to show the effect of light source over the center of our element, and held very close to it. In our case, we want the opposite effect: a light source above the element, and fairly far away. To achieve that, you can use a negative value to shrink the shadow:

article {
	box-shadow: 0 10px 9px -10px rgba(0,0,0,0.35);
}

The problem is that this value, used in the declaration we have, will essentially cancel the vertical offset, hiding the shadow behind the element. To compensate, drop the shadow down by the original offset amount plus the positive value of the spread (in this case, a total of 17 pixels):

img {
	box-shadow: 0 17px 9px -7px rgba(0,0,0,0.35);
}

The shadow is now recessed. It is also still straight; in the future, we will be able to use filters to bend the shadow, but for right now, we must use different techniques to create curved shadows… which we will explore in subsequent articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.