CSS Drop Shadows

Examples

Return to the CSS Drop Shadows Article

CSS Drop Shadows on a Box

Add an external container to control the width of the whole box.

Return to the CSS Drop Shadows Article

CSS Drop Shadows Using text-shadow

This technique, while part of the CSS 2 specification, has not yet been implemented by all modern web browsers.

This paragraph should have a .2 em down and right shadow the same color as the foreground.

Return to the CSS Drop Shadows Article

CSS Drop Shadows Using Duplicated Text

This technique uses deprecated tags and duplicated text, so it won't display correctly on browsers that don't support CSS. Plus, it is inaccessible because the text is repeated, and both lines will be read unless you use JavaScript to detect the browser and only send the drop shadow to browsers that can read it. I found this technique at saila.com.

This text has a drop shadow.This text has a drop shadow.

Discuss in my forum