Close this page

CSS3 - drop shadows

These examples demonstrate adding a drop shadow to an image.

Unlike previous CSS methods, no shadow graphic is required, the shadow is rendered by the browser.

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 values for the box-shadow property are (in order, eg) ... 10px (horizontal offset) 10px (vertical offset) 5px (blur distance) 0px (spread) #888 (colour)

WARNING: Requires hack to work in IE 5.5, 6, 7 and 8. See head tag.