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:
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.
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:
- Select a text element or a parent element that contains 1 or multiple text elements on the canvas
- Go to Style panel > Typography > More type options
- Adjust the stroke width and color in Stroke
The text stroke will appear on the selected element’s text.
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.