In this tutorial, using two scenarios I’ll show you how to take advantage of Elementor’s custom CSS option to add animated rainbow text effects to heading widgets in Elementor. The rainbow animated effects make your site not only interesting but also interactive hence grabbing your site visitor attention.

However, when you go and check under the available styles there’s no option to add a rainbow animation. And that’s why we’ll have to use Elementor’s custom CSS feature.

Note: The digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video

What you’ll need to Add Animated Rainbow Text Effects in Elementor

First of all, note that; to add a rainbow animation you need to use Custom CSS. This can only be achieved by using Elementor Pro.

With that, let’s begin!

In your dashboard, open a premade Elementor section, go ahead and select your heading widget, select Advanced then go down and select Custom CSS. Add the custom code that’s supposed to run the animation.

Credit: I’m using a CSS code compiled by Sarah Fossheim with a few edits to make it work in our tutorial.

Example 1: Animated Rainbow Text Effects

So when you get your code, you copy it, go to your custom CSS and paste it. (01:41)

When you look at your pasted CSS code, you’ll realize there’s a class that was used, that you need in order to link this code to your element. So copy that CSS class (see below), scroll back up to Advanced and paste it on the CSS Classes option.

First Rainbow Text Animation CSS

CSS Class: gradient-text

.gradient-text {
  
  /* Create the gradient. */
   background-image: linear-gradient(
        45deg,
        #FFFFFF 16.666%, 
        #E16541 16.666%, 
        #E16541 33.333%, 
        #F18F43 33.333%, 
        #F18F43 50%, 
        #8B9862 50%, 
        #8B9862 66.666%, 
        #476098 66.666%, 
        #476098 83.333%, 
        #A7489B 83.333%);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  
  /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
}

.gradient-text:hover{
    animation: rainbow-text-simple-animation 0.3s ease-in forwards;
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-simple-animation-rev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-simple-animation {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}

You’ll now notice that the gradient animation is showing. 

When you look at the preview you’ll also realize that on hover the text turns to white.

You can change that if you want by:

Go back to the Custom CSS feature and inside the CSS code you need to do some customization.

Begin by customizing the colors to suit the ones in the rainbow animation. (02:29)

In here you are able to make changes to any or all color units to suit what you want to show on hover.

You can also change the animation speed on hover. For example from the current 0.5 to 0.1, which makes it move faster on hover, or a larger number to make it slower.

There’s no need for background here so select the background and background color then delete it from the code. (02:38)

The next line of code after the background shows the text is using a conic gradient, however here we want to use a linear gradient, so instead of conic type “linear” and we also want to use the CSS property for background image, so make it “background image linear gradient” . (02:47)

Note:

You can generate gradients using the CSS gradient tool, go over to backgrounds then copy a css of your choice. You can also customize any gradient to your preference. 

You may also want to know about the key frames that help you to make up the animation. The author of this animation also added comments in the code to help you understand what the code’s doing. (04:39)

Example 2: Animated Rainbow Text Effects

For the next heading widget: 

Select the heading widget and go to Advanced. Go to Custom CSS and add the rainbow animation CSS code.

Then go into the code, find the CSS class (see below), copy it, go up to Advanced and paste it under CSS Classes, make sure to remove the dot.

Also Read: Reversed Elementor Horizontal Tabs with Gradient on Hover + a Tiny CSS

Change the conic to linear gradient and delete the background and background color properties.

In the gradient property you can also make some changes to its rotation and angle, you can also make changes to the colors within the gradient by changing those specific figures in the code. The author also explains how everything works in the code.

Second Rainbow Text Animation CSS

CSS Class: rainbow-text

/* Style the rainbow text element. */
.rainbow-text {
  /* Create a conic gradient. */
  /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */

  background-image: linear-gradient( 105.9deg,  rgba(15,209,165,1) 3.8%, rgba(15,157,209,1) 20.8%, rgba(133,13,230,1) 51.9%, rgba(230,13,202,1) 73.1%, rgba(242,180,107,1) 94.1% );
  
  /* Set thee background size and repeat properties. */
  background-size: 57%;
  background-repeat: repeat;
  
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  
  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-animation-rev 0.5s ease forwards;

  cursor: pointer;
}

/* Add animation on hover. */
.rainbow-text:hover {
  animation: rainbow-text-animation 0.5s ease forwards;
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
  0% {
    background-size: 57%;
    background-position: 0 0;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 300%;
    background-position: -9em 1em;
  }
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}

Hope you’ve tried this out and achieved that beautiful rainbow text animation and gradient text. For any comments or questions let me know in the comments section below. Please subscribe to my Newsletter and YouTube channel for more tips and tutorials.