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

We're going to cover three aspects of text shadows:

  • Text shadow presets - adding shadows to text
  • Text shadow styles - changing the way the shadow looks
  • Stacking text shadows -  layering shadows to achieve different visual effects
Webflow Shadows

Text shadow presets

You can choose from 3 text shadows presets:

Drop shadow - adds a basic shadow behind the typography.

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

Letterpress highlight - creates a subtle highlight immediately above the text.

Webflow text shadows

Text shadow styles

Once you choose a text shadow preset, you can change its style.

Color - specify the color and opacity of your text shadow. The default is solid black.

Angle - adjust the angle or direction of the text shadow by using the direction arrows, clicking and dragging the dial, or simply typing in the desired angle.

Distance - set how far away the shadow is from the typography.

Blur - choose how focused or solid the blur of the text shadow should be. 0 px is completely solid.

 

Stacking text shadows

You can add multiple text shadows on a single text element. To create unique visual effects, style each text shadow layer differently by setting various distances or colors.

Here’s an example:

  1. Add a drop shadow to a solid black text. Set the Distance to 4px
  2. Add a second shadow under the first shadow. Set the Distance to 8px
  3. Add a third shadow. Set the Distance of this shadow to 12px

As you add shadows to your text, you can see the effects live on your canvas.

 

And if you edit and change the text on the canvas, you’ll be writing with this shadow effect.

You can toggle visibility of shadow layers at any time or even rearrange the order by  clicking and dragging the layers into place.