Apply Shadow Using CSS

Kinoshita Shadowed

Learn how to drop a shadow to images or photos without using Photoshop! It's fairly straight-forward and all you need is a few simple CSS codes and this transparent shadow in PNG format.

Below are the two parts of CSS needed. The first one sets the shadow image as the background, the second one will render a border around an image.

Explanation of each CSS syntax are provided to give you a better understanding of how the code works.

.img-shadow {
float:right;
background: url(trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}

.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

Save the CSS, and call it in your webpage file through the following HTML codes.

<span class="img-shadow"><img src="tutorial-kinoshita.jpg"/></span>

As I've explained above in the CSS code, the PNG transparent image has compatibility issues with Internet Explorer. Let's put the codes to test with a cyan background in two of the most popular web-browsers on the Internet, Firefox and Internet Explorer. The results below, explains it all.

Firefox renders the transparent PNGs perfectly Internet Explorer doesn't support transparent PNG

It is believed that Internet Explorer will be able to support that format in their "Longhorn" version which will be released soon. So as for now, IE-oriented designers should use a white background for their image, instead.