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 6 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!

  3. Hi! The explanation of the process of creating 3D effect for editable text was quite useful for me. I'll definitely try to make it))

    Reply to top