3D text using just CSS

January 5, 2011

I have no idea if it’s been done before, but I’ve long wanted to put together a quick little demo showing the power of CSS’s text-shadow property. Turns out the latest versions of Chrome, Safari, Firefox, and Opera all render multiple text-shadows on elements, just like box shadows.

3D text using just CSS

So I threw this together: 3D text using nothing but CSS. No extra markup, no :before or :after mess, and no images. Just progressively enhancing CSS to add some flair to your work.

Check out the demo and let me know what you think!