How to Create a Gradient Text in Elementor (on Free and Pro Version)

There are probably some add-ons out there to create a gradient text in Elementor but I don't recommend the add-on approach as it takes only a few lines of CSS code to achieve it.

In this post, I will show you how to create a gradient text in Elementor without using a third-party add-on. Instead, I will show you the custom CSS approach.

You can apply the approach to create a gradient text on any Elementor widget that has a text element. From the Heading widget, Text Editor, to Image Box. You can even apply the gradient to the Button text.

I will also show you how to create a gradient text in Elementor version 4, which doesn't require custom CSS.

Shortcuts ⤵️

• Create CSS gradient
• Apply gradient in Elementor Pro
• Apply gradient in Elementor Free
• Animate gradient text
• Creating gradient in Elementor v4
• Video ▶️
• Summary

Creating a Gradient Text in Elementor

It takes only two core steps to create a gradient text in Elementor. First, you create a CSS gradient and add a few lines of CSS code to send the gradient background to the back and make text fully transparent.

And second, you apply the CSS code to the text you want to apply the gradient to.

By the way, you can apply the gradient to the whole text or a specific part of the text. This is the best part of creating a text gradient using this approach.

Step 1: Create the CSS Gradient

In this first step, you can use an online gradient generator to create the CSS gradient. Here are some free tools that you can use.

• ColorBeta
• Codioful
• Colorffly
• Coolors
• Angry Tools
• ColorGradient

In this post, I will demonstrate how to create the CSS gradient using Colorffly. But again, you can use any CSS gradient generator you want.

First, visit the Colorffly gradient generator website. In the CSS gradient editor, you can set the colors you want. You can also set the direction and gradient type (linear, radial, or conic).

If you have no idea about the gradient you want to create, you can simply generate one by clicking the Generate button.

Once you are done creating the CSS gradient, you can click the Code button and copy the generated CSS snippet.

Crucial to note that what you have just copied is a CSS gradient background.

Before you can apply the code snippet to a text to create a gradient, you need to add extra lines to move the background to the bottom layer and make the text fully transparent.

Here are the extra lines you need to add:

-webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;

So, the final code snippet you need to add to a text is:

background: linear-gradient(90deg, #3BD1A1 , #6FE384 0%, #1791E3 50%, #CC709B 75%);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;

Step 2: Apply the Gradient to a Text

Once the CSS snippet is ready, the next step is to add it to the text you want to apply the CSS gradient to.

I will show you how to add the snippet on both Elementor Free and Pro.

Applying Gradient in Elementor Pro

Creating a text gradient on Elementor Pro is way easier because you can add custom CSS directly to the widget.

Before you can add the CSS snippet of the gradient, you need to inspect the text element to find the CSS selector of it. You can inspect any widget that has a text element.

Inspecting the Text Element

To inspect the text element, first, preview your Elementor design on the front-end. Or you can simply close the settings panel.

Next, right-click the text and select Inspect.

Right after you select Inspect, the developer tool panel on your web browser will open with the HTML tag of the text highlighted. The CSS selector (class selector more precisely) you are looking for is the one on the left-most.

Once you get the CSS selector of the text element, you can start to apply the gradient. On the widget you want to apply the CSS gradient to, go to the Advanced tab and open the Custom CSS block.

Add the CSS selector to the editor with selector as the prefix. This prefix will make the CSS snippet apply only on the current widget. Also add the curly brackets to place the CSS declaration of the CSS gradient you have just created.

Next, paste the CSS declaration of the gradient inside the curly brackets and you should find your text turn into a gradient.

Applying the Gradient to a Specific Part of the Text

If you use the class selector of the text element, the gradient will be applied to the whole text. If you want, you can also apply the gradient to a specific part of the text. To do so, you need to replace the selector.

Instead of using the class selector to target the text element, you can use your own class selector. For this, you can delete the class selector of the text element and replace it with a class selector you define yourself.

You also need to delete the selector prefix. Here is an example. Make sure to add the dot sign when defining the new CSS class.

Next, go to the Content tab to edit the text content. Specify the part you want to apply the gradient to and add clamp it with the following tags.

<span class="your-cass-classs">your gradient your goes here</span>

A little note. If you want to apply the gradient to a specific part of the text on the Text Editor widget, you need to switch to the Code mode to add the <span> tags.

Applying Gradient in Elementor Free

Don't have Elementor Pro? No worries. You can still apply the gradient to a text element using the same method above.

The only difference is the CSS snippet placement.

Since Elementor Free doesn't allow you to add CSS code directly to a widget, you can use the HTML widget. You just need to tailor the class selector.

If you want to apply the gradient to the whole text, you can replace the selector prefix with a CSS class you define yourself.

Here is an example:

.my-gradient-text .elementor-heading-title{
    background: linear-gradient(90deg, #3BD1A1 , #6FE384 0%, #1791E3 50%, #CC709B 75%);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}

Then, add the CSS class you have defined to the widget you want to apply the gradient to. To do so, go to the Advanced tab and paste the CSS class to the CSS Classes field.

If you want to apply the gradient to a specific part of the text, then you can remove the selector of the text element:

.my-gradient-text {
    background: linear-gradient(90deg, #3BD1A1 , #6FE384 0%, #1791E3 50%, #CC709B 75%);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}

You can then place the CSS class to the part of the text you want to apply the gradient to using the <span> tags just like on Elementor Pro above.

For the HTML widget itself, you can place it anywhere on your page. Just make sure to place your CSS snippet between the <style>CSS CODE</style> tags to tell web the browser that your code is CSS code.

Make the Gradient Animated

To make your gradient text be even more attractive, you can also animate it. It's extremely easy to do so.

To animate your gradient text, first, add the following lines right after the last line of your code (before the closing curly bracket).

animation: animate-gradient 5s ease infinite;
    background-size: 200% 200%;

So, your code should look like this:

.my-gradient-text .elementor-heading-title{
    background: linear-gradient(90deg, #3BD1A1 , #6FE384 0%, #1791E3 50%, #CC709B 75%);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
    animation: animate-gradient 5s ease infinite;
    background-size: 200% 200%;
}

Next, add the following lines to apply the animation. You can place the following lines beneath the closing curly bracket or your gradient text.

@keyframes animate-gradient {
	0% {
		background-position: 0% 20%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 50% 70%;
	}
	100% {
		background-position: 0% 20%;
	}
}

So, your final code should look like this.

.my-gradient-text .elementor-heading-title{
    background: linear-gradient(90deg, #3BD1A1 , #6FE384 0%, #1791E3 50%, #CC709B 75%);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
    animation: animate-gradient 5s ease infinite;
    background-size: 200% 200%;
}

@keyframes animate-gradient {
	0% {
		background-position: 0% 20%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 50% 70%;
	}
	100% {
		background-position: 0% 20%;
	}
}

Creating Gradient Text in Elementor Version 4

Elementor editor version 4 comes with a built-in clipping feature which you can use to place an object inside a text. You can make use of this feature to create a gradient text.

Editor version 4 is enabled on a new Elementor installation by default. On an old installation, you need to activate it manually. Go to Elementor -> Editor -> Settings to open the Elementor settings screen.

Go to the Atomic Editor tab and click the Activate the new experience button.

Once Editor version 4 is active, you can create a new page and edit it with Elementor just like usual. Then, add a Heading or Paragraph element.

Go to the Style tab and open the Background settings block and add an overlay.

Since you want to create a gradient text, set the background to gradient by simply going to the Gradient tab. Create the gradient to your liking.

FYI, in Elementor v4, you can now create a gradient consisting of more than two colors.

Next, set the clipping to Text.

Next, open the Typography settings block to style up your font. This is the last step: set the text color to fully transparent and you should find your text turn into gradient.

🚨 A little note. If your text doesn't turn into gradient after you set the transparency, click anywhere on the color picker.

Tutorial Video

If you still encounter an issue, I have created the following video to make it easier for you to follow the steps I have elaborated above.

Summary

Gradient text is great. Unfortunately, Elementor didn't offer an easy way to create one in the first place and they finally did in Elementor version 4.

In Elementor version 3.x, you can create a gradient text using custom CSS, which takes only two core steps:

• Create the CSS gradient and set the background clipping
• Add theCSS snippet to a text you want to apply the gradient to

On Elementor Pro, you can add the CSS snippet directly to the widget you want to apply the gradient to. While on Elementor Free, you can use the HTML widget to add the CSS snippet and use a CSS class you define yourself to target the text.