Text shadow

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

 
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.

Step one on the left, select the Mckinley Barbers heading. Step two on the right, add a text shadow and set the settings to 4 distance, 0 blur and color white. Keep the angle at 135 for all text shadow effects added.
Step three on the left, add a second text shadow with a distance of 8px, 0 blur and color black. Step four on the right, add a third text shadow with a distance of 12px, 0 blur and color white.
On the left, the three text shadows are included in the Text shadows section of the text element. On the right, the text includes three text shadows under the solid black text "Mckinley Barbers"

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.

The text shadows section includes three text shadow effects with their settings, a hide/show icon and a delete icon. A plus icon is on the top right to add a new effect.
Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!