Learn How To Create Different CSS Box Shadow Effects

In this tutorial we are going to learn how to use the CSS box shadow property to create different effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.

CSS Box Shadow Effect 2

This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.

Demo Page

CSS Box Shadow Generator

To help people understand how these box shadows work, I've created a box shadow generator over at Coveloping. This has all the 8 different effects you see on this post and will allow you click on any of these effects to get the CSS code. Using the slider interface you can customise the look of these effects to anything you want.