How to Create a Gradient Text in Elementor

Playing around with gradient is really fun when designing a page with Elementor. Once you managed to find the perfect color combination of the gradient, you will feel like you are an artist — greater than van Gogh.

Elementor has a built-in feature to add a gradient. Unfortunately, you can only apply a gradient to a background (section and column) and button. Plus, you can only add maximum of two colors to your gradient.

Is there a way to apply a gradient to a text a in Elementor?

Of course.

In this post, we will show you how to create a gradient text in Elementor. Step by step.

What Type of Text You Can Apply a Gradient to?

Elementor has some widgets that you can use to add a text to your design. To add a heading text, you can use the Heading widget. To add a regular text, you can use the Text Editor widget. In addition to these two widgets, there are also widgets like Ico List, Price List, Reviews, to Testimonials that contain text element.

In Elementor you can apply a gradient to all widgets containing text element, including:

  • Heading
  • Text Editor
  • Button Text
  • Icon List
  • Posts
  • Animated headline
  • Price List
  • Flip Box
  • Call to Action
  • Reviews
  • Testimonials

Here is the example:

How to a Gradient Text in Elementor

Each Elementor widget (and its elements) has a unique CSS selector (class). You can figure out the selector of a widget by inspecting the associated widget. If you use Google Chrome or Firefox, you can right-click on a certain widget and select Inspect to inspect it (inspecting an Elementor widget can only be done on a live page).

Or you can visit this post to find out the list of Elementor widget selectors.

In CSS, selector is used to target a specific HTML element to apply the styling to. In the context of Elementor, you can use a selector to apply a custom styling to a widget (or a specific element of the widget) via CSS code. You can apply any styling you want, including gradient.

Here is how to apply a CSS gradient to a text in Elementor.

Step 1: Specify a Text You Want to Apply the Gradient to and Find Out Its Selector

As mentioned earlier above, there are some Elementor widgets that contain text element. First, you need to specify to which widget you want to apply the gradient to. Next, you need to find out the selector of text element of the widget.

Say you want to apply the gradient to the text of a button. In such a case, your selector is .elementor-button-text.

Again, you can check the list of the Elementor widget selectors here if you have no idea how to inspect a HTML element in web browser.

Step 2: Create the CSS Gradient

Once you got the selector of the text element you want to apply the gradient to, the next step is to create the CSS gradient. There are a bunch of online tools to create a CSS gradient. One of which is Gradienta. Once done creating the gradient with Gradienta (or any tool of your choice), copy the generated CSS code.

We also have some CSS gradient collections in case you are interested:

Step 3: Add the CSS Code of Gradient to Your Element

Now that you already have the selector and the CSS code of the gradient. The next step is to add the CSS code to the widget you want to apply the gradient to.

Simply select the widget to edit it and go to the Advanced tab on the settings panel and open the Custom CSS tab.

On the custom CSS field, type selector [selector name]{} and paste the CSS code of the gradient between the curly brackets. Example:

selector .elementor-button-text {
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);

Step 4: Apply the Gradient to the Text

Your job is not done yet. The CSS code above will only add the gradient to the background of your element. To lift it, you need to add the following CSS code right after the gradient code.

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

So, your final CSS code would look like this:

selector .elementor-button-text {
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;

The result.

The Bottom Line

Each Elementor widget — and its elements — has a unique CSS selector which you can use to apply a custom styling via CSS code. If a widget contains text element (e.g., the Button widget), you can inspect the widget to find the CSS selector of the text element to apply a custom styling via custom CSS. Once you found the selector, you can apply any styling, including gradient as we have shown above.

Custom CSS itself is only available on Elementor Pro. In other words, you need to have Elementor Pro activated on your Elementor-powered WordPress site to add custom CSS (read: Elementor Free vs Pro).

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Create a Gradient Text in Elementor”

Leave a Comment

Haven’t used Elementor Pro yet?