Benjamin Charity

3D Box Shadows

January 7th 2011

Ever thought about creating 3D elements with only CSS? Well then, take a look at this (not so pretty) piece of code.

-webkit-box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-moz-box-shadow:    1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-ms-box-shadow:     1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-o-box-shadow:      1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
box-shadow:         1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);

The values have the same positioning as your everyday box shadow. Just repeat it to create multiple shadows.