Webflow gradient text animation

Related article:

• Element Glitch tutorial Webflow
  ‍

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.

‍‍

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.

‍

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’.

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.

‍