Uploaded March 2022 | Updated September 2026, 2 hours ago

---

Learn how to create linear & radial gradient text strokes using -webkit-text-stroke and background-clip CSS properties.

🔗 Codepen demo: codepen.io/ZoranJambor/pen/RwxKOKM/656fb6e447223635c343e392d2c1e1be

📖 Resources
-webkit-text-stroke-color: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color
-webkit-text-stroke-width: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width
-webkit-text-fill-color: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
background-clip: developer.mozilla.org/en-US/docs/Web/CSS/background-clip
text-shadow: developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Timestamps:
00:00 Intro
00:25 Setup
00:56 Create text stroke using -webkit-text-stroke
03:17 Create text stroke using text-shadow
06:04 Apply background-clip to avoid problems with -webkit-text-stroke
08:11 Create gradient text-stroke
09:32 Conclusion
#css

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor