How to Add Gradient Text in Elementor (No Plugins)

I will show you how can add gradient text in Elementor using pure CSS — no plugins required.

Copy this CSS

.gradient-word {
background: linear-gradient(90deg, #9A73FF, #7A8CFF, #66E0FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

Replace the hex values with your own colors.
To find hex colors quickly, just type “Color Picker” into Google and use Google’s built-in picker.

Add CSS to your site

Paste the CSS into one of the following locations:

• Appearance → Customize → Additional CSS
• Elementor → Advanced tab → Custom CSS (available in most widgets)

Tip: I personally recommend keeping all of your custom CSS inside Appearance → Customize → Additional CSS instead of adding CSS to individual Elementor widgets.

It’s just cleaner and way easier to maintain when everything lives in one place. The only time I’ll use Elementor’s custom CSS box is for a one-off situation where I need to target a single widget and don’t plan on reusing that code anywhere else.

Apply the gradient to your text

To apply the gradient, wrap the text you want to highlight with a <span>.

<span class="gradient-word">

End the gradient wherever you want it to stop:

</span>

Example:

Build <span class="gradient-word">Reliable Websites</span> the Right Way.

See it in action on YouTube