Text stroke
Text strokes are now supported in the Webflow Designer. Under "More type options" in the Style panel, you can control the width and color of your text stroke however you'd like.
You can just show the text stroke by setting the color fill to transparent, but you can also use text shadows (under "More type options") to create a fill effect and even animate it by controlling the distance.
Video transcript
Text stroke in Webflow lets you add an outline to text characters — a stroke around the letterforms rather than a fill. It's a design technique used for display headings, decorative type, and achieving a modern outlined text aesthetic.
In Webflow, text stroke is applied through custom CSS, since there isn't a dedicated text stroke control in the native Style panel. The CSS property is -webkit-text-stroke, which sets the width and color of the stroke. For example: -webkit-text-stroke: 2px #000 would give the text a 2px black outline.
You can combine text stroke with a transparent text fill to create fully outlined, hollow text. Set the color property to transparent and use -webkit-text-stroke to define the outline.
To apply this in Webflow, add the custom CSS through the element's custom CSS field in the Style panel, or use a Code Embed or site-level custom code. The -webkit-text-stroke property has good browser support across modern browsers.
