new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

While a box shadow adds styling inside or outside an element's boundary, a text shadow applies a shadow directly to typography.

In this video, we're going to cover three aspects of text shadows: 

  1. Text shadow presets: adding shadows to text
  2. ‍Text shadow styles: changing the way the shadow looks
  3. ‍Stacking text shadows: layering shadows to achieve different visual effects

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets


While a Box Shadow adds styling outside or inside of an element's boundary, a Text Shadow applies directly to typography.

We're going to cover three aspects of Text Shadows. We'll take a look at three different presets, then we'll get into the styles we can control inside our shadows, and we'll cover stacking or layering of multiple Text Shadows.

Let's start with the presets.

Three presets: Drop shadow, Letterpress shadow, and letterpress highlight.

Drop shadow gives us a great, basic shadow behind the typography.

Letterpress shadow creates a subtle lift by dropping a very thin, solid shadowing immediately under our text.

And of course a letterpress highlight creates a subtle highlight immediately above our text.

Those are the presets.

Let's style some Text Shadows.

Here's a heading. And here's a heading inside a section.

And we'll add a quick drop shadow. And upon doing this, we can change anything — the color (solid black is the default; we can use any color). We can change the opacity.

Just like other shadows, we can also change the angle of the shadow by pressing these arrows. Or dragging the dial.

Moving on, we have distance: how far away the shadow is from the typography.

And of course, who can forget: blur. 0 is completely solid; you can crank up or crank down this value and see the result on the Canvas.

Finally, let's cover stacking or layering. And we'll create a retro effect with stacking here.

And our text is darker — in fact it's a solid black color, so let's start by adding a drop shadow and setting it to white so we can see the shadow underneath. But we'll do something interesting and set the blur to 0 so it's solid, and then we'll set the distance to 4px. Why 4px? Gives us enough distance to see what's going on. That's what we're doing — you can play around and find what works best for you.

We'll close out, and add a second shadow: this one appears right under our first shadow.   That's the layering or stacking part of this. Same thing here: blur to 0. And we'll double that distance. Before we had 4px; now we'll do 8.

And we'll add one, final, third shadow. Blur to 0. This time we'll add yet another 4px to make the total 12px. And we'll set that to color to white for high contrast.

This shadowing is applying in real time. So we can change the text on the Canvas and we'll be writing with this shadowing effect.

We can toggle visibility at any time, or even rearrange the order of our Text Shadows by clicking and dragging into place.

So. Text Shadow presets let us quickly style our typography. We can go deeper into those styles and configure our shadows. And we can stack shadows to achieve different visual effects.