Animated Gradient Text Generator for Elementor

Give your website’s typography a modern, eye-catching upgrade without installing heavy plugins. This free CSS generator creates smooth, continuously looping gradient animations for your text.

Live Preview
Gradient Settings
3s
Generated CSS
Copied to clipboard!

How to Use the Generator

  1. Choose Your Colors: Pick up to 4 colors to create your perfect gradient flow. Click the hex code to type in your brand colors directly.
  2. Set the Speed: Adjust the animation duration. Lower numbers mean a faster loop, while higher numbers create a slow, soothing transition.
  3. Copy the Code: Once you are happy with the live preview, click “Copy Code” to grab your pure, lightweight CSS.

How to Add the Animation to Elementor

If you have Elementor Pro: Adding this effect is incredibly simple because the code is pre-formatted for Elementor!

  1. Open your page in the Elementor Editor.
  2. Click on the Heading Widget (or any text widget) you want to animate.
  3. Go to the Advanced tab in the left panel.
  4. Scroll down to the Custom CSS section.
  5. Paste the copied code directly into the box. The word selector automatically targets your specific widget. You’ll see the animation instantly in the editor!

If you are using the Free version of Elementor:

  1. Click on your Heading widget and go to the Advanced tab.
  2. Under CSS Classes, type in a custom class name (e.g., my-animated-text). Do not include the dot.
  3. Go to your WordPress Dashboard > Appearance > Customize > Additional CSS.
  4. Paste the copied code there, but change the word selector to your class name (e.g., .my-animated-text).

Why Use Animated Gradient Text?

  • Instant Attention-Grabber: Perfect for Hero section headlines, highlighting special offers, or making your primary Call-to-Action stand out.
  • Zero Plugin Bloat: Avoid installing another WordPress plugin just for one text effect. This pure CSS method keeps your page load times lightning fast.
  • Seamless Looping: The generated code automatically duplicates your starting color, ensuring the animation loop is invisible and perfectly smooth.