Webflow gradient text animation

Webflow gradient text animation

Related article:

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.

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Website pre-launch checklist

69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.

You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.

€30 Now: €9.00
Check it now
Home
about
work
Blog
Contact

Suggested articles