Page Curl Box Shadow

I've seen this effect done plenty of times using images, so I set out to create the "page curl" shadow effect using only CSS. I like the depth it creates, giving the illusion that the corners of the box are slightly lifting off the page.

To achieve the effect, I used the :before and :after pseudo-elements to create the shadows and eliminate the need for extra markup. I then applied a box-shadow and transform to them, and positioned them as needed.

I created several variations, with shadows on both sides, one side only, and the top & bottom of one side to show various effects.

As an extra measure, I added a linear-gradient to each box to give it some "shading" on the side that is supposedly lifting off the page.

I think this is simple, but effective way to add some depth to your designs. This effect should work in IE9+, with the linear gradient working in IE10+

Enjoy! :)