Use box-shadow for a "stacked" effect

Posted on April 27, 2013

When box-shadow got added to the CSS spec, I didn’t realize how powerful it would be. Having the ability to combine multiple shadows together can create all sorts of interesting effects.

On the first iteration of my blog, I used some presentational markup and :before and :after psuedo selectors to create a “stacked” look on the articles.

I recently reworked it to only use one element and a couple box-shadow declarations. This is tested in Chrome, Safari, Firefox, and IE 9+.

Check out this Pen!

Note: The trick is to use inset on the box-shadow declarations. It’s strange to think of the box-shadow being inside the element, but in order for the div border and box-shadows to line up you need work the shadow this way.