Text stroke

Add a text stroke to elements on your site.

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

With text stroke, you can add a stroke to text on your site. You can also adjust the text stroke color and width.

In this lesson, you’ll learn:

  1. How to add a text stroke
  2. How to add a text stroke color transition
Note: If you previously added text stroke via custom code, we recommend you remove that custom code before adding a text stroke via the Style panel.
A site in the Designer has a text stroke applied to the hero title.
The transparent “Ready Set Spring” text in the hero title has a yellow, 2 pixel text stroke applied.

How to add a text stroke

You can add a text stroke either to a text element (e.g., a text block, paragraph, or heading) or a parent element that contains 1 or multiple text element(s) (e.g., a section that contains 2 text blocks). If you add a text stroke to a parent element, all child text elements will inherit the text stroke styling.

To add a text stroke to an element:

  1. Select a text element or a parent element that contains 1 or multiple text elements on the canvas
  2. Go to Style panel > Typography > More type options
  3. Adjust the stroke width and color in Stroke

The text stroke will appear on the selected element’s text.

A 2 pixel width, yellow text stroke is added in the Typography section of the Style panel.
Note: The stroke color is automatically set as the font color if the stroke color hasn’t been set on a higher breakpoint. If the text stroke doesn’t appear at first, the stroke color may be set to the font color, or the stroke width may be very thin.

You can also add/change text stroke styling on different breakpoints if you want the text stroke to appear differently on certain screen sizes.

How to add a text stroke color transition

You can add a color transition to your text stroke. To do so, select the text element or parent element on the canvas, choose a state from the States dropdown menu (e.g., hover), and adjust the text stroke styling for the selected state.

Note: Text stroke width transitions are not supported.