Close this page

CSS - drop shadows

This example demonstrates adding a drop shadow to an image.

You need to create a drop shadow graphic (gifs work well) that is the size of the biggest image you are ever likely to use (800 x 800 pixels?). In this example we have added an 8 pixel drop shadow to the image using a Photoshops layer style. The Photoshop file is here (right click to download).

This is one of several possible techniques.

The CCS styles for this example are located in the <head> tag of this page, so just view the page source code to see what's going on.

NOTE: The display:block and positioning:relative property/values solve an IE5/6 bug.