The spec itself is quite simple (x and y offset, blur radius, color). So adding a single drop-shadow is as simple as applying one property.

But CSS developers have never been short on clever tricks, and text-shadow is no exception.

Two websites offer slightly different clever uses of text-shadow, designed to produce more complex 3D text effects:

Chris Coyier's 3D Text Tower combines multiple shadows with transitions and transformations to produce several pleasing mouseover effects. Very few shadows at any given time, to keep the transitions clearly visible.

Rohit's 3D text tutorial overlays numerous shadows (up to twelve) with multiple offsets to produce much more veristic 3D text -- not just 'here's a shadow', symbolically, but 'this looks like solid plastic'.

Maybe start with the first, then move on to the second, then apply some transitions from the first to the second, for cooler effects.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.