How do I add a text shadow in Webflow?

Open Text shadows on the letters

Select the text you want to shadow, such as a heading. Open Style panel, then Typography, then Text shadows. That section is where a shadow on the letters is set.

Webflow describes text shadows as a visual effect that displays text with a shadow. You can keep more than one layer. Hide a layer with the eye icon when you want to compare the words with and without it. Drag layers to change their order.

Example: a white heading sits on a photograph and disappears in the bright part of the picture. Select that heading, open Text shadows, and add the shadow there. Leave the quote under the photo alone so the body text stays plain.

Any change you preview on the canvas still needs a publish before visitors see it on the live site. Judge the shadow on the published page, not only in the Designer.

Put the shadow on the text that should have it

When you adjust a typography style on an element, the change applies to the text elements inside it as well. A text shadow is a typography style. If you set it on a whole section, the heading, the price, and the small label can all pick it up.

Select the one element that should change, and set Text shadows on that element's class. If a child already shows a shadow you did not set on it, the value is inherited. An orange indicator means the style comes from an ancestor, a tag, a base class, or a higher breakpoint. Click the orange indicator to see where it comes from.

A blue indicator means the style is set on the current class, tag, or breakpoint. Click that label and choose Reset when you want the local shadow removed. Option-click the label on a Mac, or Alt-click it on Windows, to reset it.

Example: Hero heading should have the shadow, and Hero support should not. Set the shadow on Hero heading. If Hero support still shows it, reset the inherited value on that class, or clear the shadow on the parent that passed it down.

Do not confuse it with a box shadow or a stroke

A box shadow follows the rectangular edge of an element. It lives under Style panel, Effects, along with opacity, filters, and transitions. Use it when the card or the button should lift off the page. The box shadow guide is that control. A text shadow does not replace it, and a box shadow does not draw the shadow on the letter shapes.

A text stroke is also under typography, and it is a different setting from a text shadow. The stroke draws around the letters. If a stroke does not show, the stroke color may still match the font color, or the width may be very thin. The underline guide is the decoration line under the words, which readers often expect to mean a link. Use Text shadows when you want a shadow, not a line and not an outline.

Color is separate again. The text color guide is the swatch and the contrast checker. The checker rates the text color against its background. It is not a shadow control. Set a color you can read, then add a shadow only if the letters still need it.

Check the class, the parent, and a phone

The Affected elements count under the Selector shows how often the class is used on this page and across the site. Click it to outline the elements that share the class. If every heading on the site gains a shadow, the class is shared. Move the shadow to a class that only the photo heading uses.

Look at a narrower width before you publish. You can style for other device sizes in the Style panel. If the phone heading is shorter and the shadow feels heavy, set the text shadow while that smaller breakpoint is selected. Then return to desktop and confirm the original heading still looks right.

Publish, and read the heading on the live page over the real photo. A shadow that looks soft on a flat color in the Designer can look muddy on a busy image, or it can vanish. Hide the layer with the eye if you need a quick comparison, then leave the layer visible only if the words are easier to read with it on.

A text shadow on a heading you already have is ordinary type work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.