css - 3D Box Shadow effect

Question

So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below.

The effect I'm trying to achieve is a 3D box shadow, as shown in the bottom of the graphic below.

Any ideas on how to do this with CSS3 box shadows?

Answer 1

Unfortunately box shadows are effectively just flat layers. However you can apply multiple box shadows to create this effect.

.box-shadow-3d{
    box-shadow: 1px 1px 0px #999,
                2px 2px 0px #999,
                3px 3px 0px #999,
                4px 4px 0px #999,
                5px 5px 0px #999,
                6px 6px 0px #999;
}