Text shadow

Add depth and create unique text styles by stacking text shadows.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

You can add multiple text shadows on a single text element to create unique visual effects by styling each text shadow differently.

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.

 
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback