Create Gradient CSS Text Strokes
Learn how to create linear & radial gradient text strokes using -webkit-text-stroke and background-clip CSS properties.
🔗 Codepen demo: https://codepen.io/ZoranJambor/pen/Rw...
📖 Resources
-webkit-text-stroke-color: https://developer.mozilla.org/en-US/d...
-webkit-text-stroke-width: https://developer.mozilla.org/en-US/d...
-webkit-text-fill-color: https://developer.mozilla.org/en-US/d...
background-clip: https://developer.mozilla.org/en-US/d...
text-shadow: https://developer.mozilla.org/en-US/d...
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:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor