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.

Add the CSS

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

.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 the 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)

Quick note: 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>.

Place this before the word you want to style:

<span class="gradient-word">

<span class="gradient-word">

End the gradient wherever you want it to stop:

</span>

</span>

Example:

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

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

You can repeat this as many times as needed to apply the gradient to different words or phrases.