Learn how to create a stunning text outline (stroke) effect in Webflow using simple custom CSS. Perfect for beginners, this step-by-step tutorial shows how to add stylish text outlines even without native Webflow support. Enhance your website typography with this easy guide!
In this tutorial, I’ll teach you how to create a text outline effect (also called text stroke effect) in Webflow. We’ll replicate the outline effect seen on my portfolio site, dereksiu.com.au. Since Webflow doesn’t support this natively, we’ll use a simple custom code workaround.
Plaese note: This tutorial has since been outdated and Webflow now has a native way to do this. So that way is easier. But nevertheless this method still works and you will learn something.
You'll understand the concept behind text stroke effects, how to add custom CSS via embeds or page settings, and how to apply the effect to your text elements in Webflow — even if you’re a beginner.
Click the plus icon in Webflow Designer, scroll to "Embed," and drag it onto your canvas. Inside the embed, add a <style> tag with CSS that creates the .outline class for the stroke effect.
Tip: The CSS sets text fill to transparent and adds an outline stroke with customizable thickness and color.
Inside the <style> tag, define the .outline class with:
color: transparent; to hide the fill-webkit-text-stroke: 0.8px #FF6600; to create an orange stroke (adjust thickness and color as needed).Select the text or heading you want outlined and add the class outline. Webflow will recognize the class from the embed code and apply the stroke effect.
If you’re on Webflow’s free plan and can’t use embeds, go to your page settings and paste the same <style> CSS code inside the Body tag custom code section.
Note: You won’t see the effect inside Designer but it will appear on the published site.
Publish your site and check the live version to see the text outline effect in action.
This simple custom CSS method bypasses Webflow’s native limitations, letting you create stylish text outlines with ease. Try customizing stroke width and color to match your branding.
