Dynamic pure CSS 3D Text

Using text-shadow to obtain a pseudo 3D effect is a nice technique but the 3D effect is limited to just one direction. I was wondering if we could get a better effect by adding a pinch of CSS transforms.

The basic idea is pretty simple. You can get a nice 3D effect combining multiple levels of text-shadow. This is an example:


The code required to get this result is something like:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

To make everything more dramatic we could add some CSS transforms, and dynamically rebuilding the text-shadow we get a nice mouse-following pure CSS canvas-free 3D text effect.

This is the actual demo (chrome+safari, nice degradation on Firefox), and here below the screencast (in case you are using the wrong browser).

The 10 lines of JS code required are inline and self explanatory. Have fun!

12 thoughts on “Dynamic pure CSS 3D Text”

  1. Nice! I’m thinking of using this for a site and adding a fallback image for browsers that don’t support it.

    I’m thinking that a small Modernizr module could probably handle the test for support

  2. Could you create a 3d text button ? On click animate it to loose its shadow.

Leave a Reply

Your email address will not be published. Required fields are marked *