Creating 3D Text with Text-Shadow

Playing with Codepen is fun. Every now and then, I do something silly there that might actually have an immediate practical use—and that's the case with this little tut. We're going to create a 3D effect for editable text, using only the text-shadow property. And then we're going to add something really fun on :hover. Read on, fearless coders...

First, it's important to understand the text-shadow property. It's almost identical to box-shadow, except that it is applied to text. This makes it really handy for drop shadows that have more complex shapes.

Another important aspect of text-shadow (and box-shadow, for that matter) is that you can have multiple shadows for one element, separated by a comma. The amount of shadows is, for all intents and purposes, unlimited. It's this aspect that makes our tutorial possible. On to the code.

First off, we're styling a VERY simple html element: the h1 tag. You can place whatever text you want in it.

html
<h1>Hover over me.<br>I'll surprise you.</h1>

See the Pen 3d Text using Text-Shadow by Jesse Couch (@designcouch) on CodePen.

If you're confused by that, you're probably best advised to stop reading and go buy this book (actually, everyone should own it - so do yourself a favor and buy it anyway).

Now on to the slightly more complex CSS.

The important thing to look at is the text-shadow property. As you can see, we're using 10 text-shadows, and each is incrementally staggered to be 1px further in, both in the x & y offsets. The technique is basically building our 3D text, one layer at a time. The colors change slightly too, starting with a darker color in the back and as the shadows get closer to the actual text, they lighten up slightly.

css
body {
  background-color:#2d3e43;
  overflow:hidden;
}

h1 {
  margin:100px auto;
  text-align:center;
  font-size:100px;
  color:white;
  position:relative;
  left:0;
  text-shadow:
    1px 1px 0px #c4dbe2,
    2px 2px 0px #b4d1d9,
    3px 3px 0px #a6c6cf,
    4px 4px 0px #94b8c3,
    5px 5px 0px #87aeb9,
    6px 6px 0px #7aa3af,
    7px 7px 0px #6d97a3,
    8px 8px 0px #618b98,
    9px 9px 0px #56818e,
    10px 10px 0px #4c7683,
    15px 15px 25px rgba(0,0,0,.9);
  	transition: .5s ease-in-out;
}

h1:hover {
	left:20px;
  text-shadow:
    -1px 1px 0px #c4dbe2,
    -2px 2px 0px #b4d1d9,
    -3px 3px 0px #a6c6cf,
    -4px 4px 0px #94b8c3,
    -5px 5px 0px #87aeb9,
    -6px 6px 0px #7aa3af,
    -7px 7px 0px #6d97a3,
    -8px 8px 0px #618b98,
    -9px 9px 0px #56818e,
    -10px 10px 0px #4c7683,
    -15px 15px 25px rgba(0,0,0,.9);
}

See the Pen 3d Text using Text-Shadow by Jesse Couch (@designcouch) on CodePen.

One last thing to notice here—and that's our :hover effect. We're doing this with CSS3 transitions. Each text-shadow gets moved on its x-axis to its negative counterpart on :hover; for instance, if the shadow's x was 15px, then on hover it becomes -15px. The transition that we applied animates this change. This ends up making it look like your perspective is changing, and is a pretty awesome looking effect. Take a look:

demo

See the Pen 3d Text using Text-Shadow by Jesse Couch (@designcouch) on CodePen.

As usual, chime in below if you like it, hate it, or have any suggestions on making it better.

Did I help you out?

Read More

←  Pure CSS Long Shadows Improving the Drawer Menu  →

There are 5 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Camilo

    Camilo

    Jun 27, 2015

    Hi!
    It's a great effect that you teach here. I rly thank you... i don't know if i'll use it soon, but anyway i save it, thnx!
    C.

    Reply to Camilo

    1. Jesse

      Jesse

      Jun 29, 2015

      Thanks, Camilo! Glad that you like it. The practical applications for this are fairly limited, but I still enjoy doing things like this just for the fun of it.

  2. Lawrence Mugambi

    Lawrence Mugambi

    Mar 24, 2016

    Wonderful, I like the CSS tricks. One of the best I have come across!

    Reply to Lawrence

    1. Jesse

      Jesse

      Mar 24, 2016

      Thanks, Lawrence! Glad you like it.

    2. CSS generator

      CSS generator

      Oct 26, 2017

      Nice article
      Thanks!