How to Create Gradient Text in Elementor Pro with Custom CSS

Gradient text instantly makes headings feel modern and premium. With Elementor Pro and a few lines of custom CSS you can apply a smooth color gradient to any heading, no images required. This guide gives you the code and shows exactly where to paste it.

Custom CSS for Heading Text

selector .elementor-heading-title{
    background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Custom CSS for Paragraph Text

selector .elementor-text-editor{
    background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Live Preview

Add Your Heading Text Here Add Your Heading Text Here

Custom CSS for Text

<!--<span class="ah">  Here Add Your Heading Text Here </span>-->


ah{
    background-image: linear-gradient(45deg,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientAnimation 8s linear infinite;
    animation-direction: alternate;
    background-size: 300% 100%;
}
@keyframes gradientAnimation {
    0% {
        background-position: 0
    }

    to {
        background-position: 100%
    }
}

Live Preview

Add Your Heading Text
Here Add Your Heading Text Here

How it works

The trick uses background clip set to text together with a transparent text color. You apply a linear gradient as the background of the element, then clip that background to the shape of the letters so the gradient shows through the text. It is supported in modern browsers and stays crisp at any size.

Tips and customization

• Change the gradient colors to match your brand.
• Adjust the gradient angle for a diagonal or vertical blend.
• Apply it to one heading using its CSS class or the selector keyword.

FAQ

Do I need Elementor Pro?
The per element custom CSS box is a Pro feature, but you can also add the CSS in Site Settings on the free version.

Will it hurt SEO?
No. The text stays real, selectable text, so search engines read it normally.