Text shadow

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

layout-design
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?