Over a million developers have joined DZone.

Tweaking CSS3 Text Shadows: Two Examples

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

If I had a dime for every time I created a text drop-shadow in Photoshop, I wouldn't have worried about the price.

But this seems a little wasteful: drop-shadowing for a living would be like erecting awnings for a living, if Photoshop were a structural engineer.

Drop-shadows are simultaneously very simple and extremely common -- which is why CSS3 now has text-shadows built-in.

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.


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}