Webflow gradient text animation

Julius vd Westhuizen
Julius vd Westhuizen
Published on
August 15, 2022
Estimated read time
5
 minute read
Julius vd Westhuizen
Published on
August 15, 2022
Estimated read time
5
 minute read

So you’ve added a gradient to your text to bring some color to your website? Cool. Let’s bring it to life with this simple Webflow gradient text animation. This animation creates an infinite flowing effect, taking your excellent gradient text to the next level. Ok, Let’s get started!

To follow this tutorial, you will need a Webflow plan that allows you to add custom code.

For demonstration purposes, I’ll assume that you have not set up anything yet, and take you through the steps from start to finish.

The main steps we will go through to get the final result are as follows:

  • Add the text to the page.
  • Wrap the text you want to animate with a span, giving it a custom class.
  • Add a linear gradient to the text and clip it to the text.
  • Add a few lines of CSS in the custom code section in the page settings. (Don’t worry, everything is provided!)

Adding text to the page

Let’s add the text to the page. You can add any type of text, a plain text field, a heading, or a paragraph. It doesn’t matter.

In this instance, I’ll be adding an H1.

Adding text to the page

Wrap text with a span

Wrap the text to which you want to add the animated gradient effect with a span. To do this, select the text and click the paintbrush icon above it.

Give the span a custom class. For this demonstration, I have used ‘gradient-text’ as the class name.

Give a custom class name ,the class name must match the class you apply the CSS styling.

Add a linear gradient to the text wrapped in the span

Add a linear gradient to the text. The gradient must be set to 90 degrees. You can play around here until you find the best color combination.

In the style settings, you will find the linear gradient option under ‘Backgrounds’.

Adding the gradient

Once you have added the gradient, open the “Clipping” dropdown and select  “clip background to the text”.

Add the CSS before the closing body tag.

This is what makes the magic happen. Remember, you will only see the animation on the published site, not in the Webflow designer.

<style> 
/*Gradient text styling */
.gradient-text {
	background-size:400%;
	animation: animate 10s linear infinite 
}
/* Gradient animation */
@keyframes animate {
	0% {
  	background-position: 0%;
  }
  100% {
  	background-position: 400%;
  }
}
</style>

Note: If you used different class name, then change 'gradient-text' in this code to your class name. Keep in mind that CSS class names are case insensitive, and cannot contain a space. Meaning that class 'Div block 10' should be written as 'div-block-10' in this custom code.

Now to what the code does -  it sets the background-size to 400% of the span; we then create a keyframe animation named ‘animate.’ it then moves the background linearly over a period of 10 seconds. This is what gives the effect that the color is infinitely changing.

As we can see, in the ‘animate’ keyframe, when at 0%, the background position is at 0%. At 100%, the background position is at 400%. So over a period of 10 seconds, the background position moves along the X-axis from 0% to 400%. We can modify the length of the animation by changing the 10s seen in the “.gradient-text”  styling in the CSS.

You can see a live demo of this effect here. Here you can also see a clonable, and a read-only here.

And there we go! Publish your site to see the animation in action. I hope you enjoyed this tutorial. Stay tuned for more tips and tricks to make your Webflow website stand out from the crowd.

Ready to get started?

We specialise in profit generating websites that tell your story, increase your conversions and educate your audience. Reach out to the team today to discuss your project with us.

Contact us