Create Gradient Text in Webflow - Tutorial

In this Webflow Tutorial, I am going to show you how you can create Gradient Text in Webflow. We will be using a bit of Custom Code for adding a gradient to the text.

NOTE: Use Angle Brackets instead of Square Brackets!

[style]
.clipped {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
[/style]

---------------------------------------­----
UI/UX Design Tutorials:

Webflow Course for Beginners:

Photoshop Tutorials:

Illustrator Tutorials:

After Effects Tutorials:

UI Design Tutorials:

Design Resources, Tools and Softwares:

Adobe XD CC Tutorials:

eSports Design Tutorials:
--------------------------------------------------------------------------------------------
Contact me :
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#webflow #nocode #webdesign

[matthewmorley]

Just a heads up, you can now do this without custom code. Go to the text block you want to add this style to. Set the background gradient and then below the 'Color' selector you can now select 'Clipping'. Select 'Clip background to text' for the same effect. Hope this helps!

[uifabian]

Wow! Thanks for this! Really helped with my projects!

[anuchek]

Thank you so much man! It was so helpful!

[milashmadchenko]

Thank you! This is awesome tutorial - I don`t know much English, but I understood everithing :)

[prashantsharma]

Thanks so much! I'm building my portfolio on Webflow, and I was stuck for weeks on how to achieve this effect.

[denniszoephob]

thank you so much ! Very helpful tutorial (:

[BigheadSinan]

Please more Webflos tutorials. Thanks a lot!

[jamesoliverseo]

This is awesome thanks. I do have an issue tho, it keeps clipping my text to the background box

[rheedmac]

How is your custom code showing in the designer and not when it's published and viewed on live site? I only get the filler text "This <script? embed will only appear on the published/exported site". Cheers

[davidmeszaros]

the safari is not supported. any suggestions?

[othuke]

There is s abetter way to do this on webflow