How to Create 3D Text With CSS3

We’ve already seen how the CSS3 text-shadow property can be used to create glowing and blurred text. Today, we’re going to push the property to its limits and enter the realm of 3D:

3D text effect

This is achieved without graphics, plugins, or canvas trickery. Don’t believe me? Take a look at the example page in Firefox, Chrome, Safari or Opera (sorry IE users — you’ll need to wait for version 10).

The depth is created with multiple text-shadows. Each has a zero blur and is increasingly offset from the main text. This graphic shows how the layers are constructed but, in the real example, the colors are similar and the spacing is no more than 1px apart:

3D text effect

A few blurred shadows are then applied to make the 3D effect more realistic. The final CSS:


p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

The demonstration page shows an example and contains the full source code.

OK, so it’s a lovely effect but that’s a lot of CSS code for your weary typing fingers. Building your own styles will also take time and effort. Wouldn’t it be great if we had something to handle the donkey work for us? Stay tuned to SitePoint…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/thedamon Damon Muma

    Looks great! Just selecting fancy looking text like that with my mouse is a joyful experience. + 0easing the donkey work sounds like a good plan, too…!

  • http://twitter.com/pedromagnus Pedro Mourelle

    This info + Less = BLESS. :P

  • Jacksonk0608

    This is really creative yet simple. Nice.

    Maybe I am a perfectionist, but I don’t like the black spot where the stairwell effect at the bottom right of the text lets too much shadow show. I reversed the horizontal offset and the vertical offset in all the text-shadows with blur. (So, the shadow goes to the right and upwards instead of down.) The little blemish was removed.

  • solomon

    good job nice

  • Noah Blon

    Love this effect. I’ve already built something that generates text like this:

    http://3dcsstext.com/

  • jalingo

    Funny. I guess this is the part not “developed for you in part by Windows® Internet Explorer 9″ since I can’t see it in IE9. You’d think by version 9 a company would be able to be on top of all the latest gizmos in their product. Nice article though. Thank you.

    • http://www.onsman.com Ricky Onsman

      To their great credit, the people at IE are supporting us with this venture in the full knowledge that the current version of their own browser may not support every aspect of HTML5, CSS3 or related emerging technology discussed here.

      Then again, no current browser supports every part of HTML5, not even when the browser version is up to 14. Is that funny, jalingo?

  • marjo

    Thanks!

  • Ajit kumar hota

    hello boss,
    i get ur link from from other site..I want to know more about css…so if u told me about the link of
    The art and science of css book then i really greatful to u..

    Sory my english is not gud,,hope u understand what i want to say u..
    thanu vary much for reading my meg…

    • http://www.onsman.com Ricky Onsman

      Hi Ajit, you’ll find that book – and a few others – if you browse our bookstore using this link. Good luck with it.