3D Text Shadow Effects with CSS

The easiest way to create a shadow effect is to use either the text-shadow CSS property. This is very straightfoward (when supported). See the W3 Schools page for more details.

TEXT

<p style=”font-size: 3em; color: #c00; text-shadow: 3px 3px #ccc;”>TEXT</p>

However, using this property the horizontal and vertical distances set are then the same across the whole HTML element. Furthermore, the shadow colour is fixed and does not change depending on the backgournd colour below it.By creating a second identical HTML element and placing it below the original we can control both the shadow distances and the opacity of the shadow.

We can place 2 bits of text one on top of the other using CSS absolute positioning and z-index.

TEXT

TEXT

Here’s the code:

<div style=”width: 150px; height: 50px; position: relative;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 3em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 3em; color: #ccc; z-index: 1;”>TEXT</p>
</div>

Note that the 2 paragraphs have a containing <div> to use the absolute positioning. You might also notice that the top and left values are 3px higher for the shadow text so that it sticks out to the bottom right and the shadow z-index is set to a lower value than the original text so that it is displayed behind it.

The next thing we can do is to alter the text’s letter-spacing so that the shadow is no longer a carbon copy of the original text but more widely spaced, giving a feel of perspective.

TEXT

TEXT

<div style=”width: 300px; height: 100px; position: relative;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 5em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 5em; color: #ccc; z-index: 1; letter-spacing: 2px;”>TEXT</p>
</div>

You can now see that the horizontal shadow distance is greater on the last letter than it is on the first – the shadows get longer from left to right, which makes it appear as if the light source is further to the left.

Using a grey colour for the shadow text is ok on a plain white background but it would look odd over a darker background:

TEXT

TEXT

Therefore, we should not use grey but black and set the opacity of the text to something low.

TEXT

TEXT

<div style=”width: 300px; height: 100px; position: relative; background-color: #666;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 5em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 5em; color: #000; opacity: 0.1; z-index: 1; letter-spacing: 2px;”>TEXT</p>

It’s worth experimenting with different letter-spacing, positioning and opacity to see what works best for you.

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in css, letter-spacing, opacity, positioning, text-shadow and tagged , , , , , , , , . Bookmark the permalink.