DEV Community

Cover image for How To Add Animated Gradient Text in Elementor?
Roy jemee
Roy jemee

Posted on

How To Add Animated Gradient Text in Elementor?

If you want your website to stand out, you must incorporate eye-catching design elements. One such design trick that can make your headlines pop is animated gradient text. It looks sleek, modern, and engaging, and the best part is—it’s incredibly easy to implement in Elementor! In this post, I’ll walk you through the steps to create stunning animated gradient text using Elementor and some custom CSS.

NOTE: Custom CSS is not available in the free version of Elementor plugin. You must use Master Addons plugin to get the custom CSS feature.

Download Master Addons: https://wordpress.org/plugins/master-addons

Step-by-Step Guide to Creating Animated Gradient Text in Elementor

Step 1: Add the Headline Element

First, open your Elementor editor and add a headline element to your page. This will be the text that you want to apply the gradient effect to.

Image description

Step 2: Customize Typography

Next, customize the typography settings of the headline element to suit your design preferences. This includes font style, size, weight, and any other typographic features you wish to modify.

Image description

Step 3: Apply Custom CSS

To add the animated gradient effect, you'll need to use some custom CSS. Copy and paste the following CSS code into the Custom CSS section of your Elementor editor:

selector {
    background: linear-gradient(90deg, rgba(176,177,161,1) 0%, rgba(197,204,106,1) 42%, rgba(91,183,188,1) 74%, rgba(68,0,255,1) 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 5s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

Feel free to customize the colors mentioned in the background property to create your unique gradient effect.

Step 4: Update and Preview

Finally, update the page and preview it. You should see your headline text with a beautiful animated gradient effect!

Conclusion

With just a few simple steps, you can create stunning animated gradient text in Elementor that adds a touch of modern elegance to your website. This technique is perfect for drawing attention to headlines and making your content stand out. Give it a try and see how it transforms the look and feel of your web pages!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay