CSS box shadows have become very common across the web. I wanted to create shadow effects to some of my photographs to make it look attractive. Initially I thought it might take some time, but after referring few sites I made it within minutes. I have posted the code below along with demo. It works in all major browsers and IE 9. Old versions of IE doesn’t support.

Normal Box Shadow CSS Code

div.normalshadow {
	-moz-box-shadow: 3px 3px 4px #555;
	-webkit-box-shadow: 3px 3px 4px #555;
	box-shadow: 3px 3px 4px #555;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555');
}

Demo – Normal Box Shadow

Do you want to know how it works? It’s simple. The syntax has four parameters: offset-x offset-y, blur-radius, spread-radius, and color. IE runs shadow effect but the code is little complicated as you see in the bottom portion of the above code.

Inset Box Shadow CSS Code

div.insetshadow {
	-moz-box-shadow: inset 3px 3px 4px #555;
	-webkit-box-shadow: inset 3px 3px 4px #555;
	box-shadow: inset 3px 3px 4px #555;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555');
}

Demo – Inset Box Shadow

There is no big difference in code between normal and inset shadow. You just need to place the keyword inset to make it work.