Gradient Text With Elementor

By James LePage
 on August 2, 2020
Last modified on January 6th, 2022

Gradient Text With Elementor

By James LePage
 on August 2, 2020
Last modified on January 6th, 2022

In this tutorial, we're going to discuss how to add gradient coloring to text in Elementor. This adds a unique effect to your website, and sets it apart from the pack.

There are going to be no third party add-ons used here, just the Elementor heading element and a little bit of custom CSS. Without any further ado, let's get into the tutorial.

First, here's exactly what the final product is going to look like:

Why Hello There!

Step 1: Add The Content

The first step to adding gradient text to Elementor is dragging the text or heading element on to the page. Then, add your content accordingly.

You can change all styling other than the font color using the native options.

Step 2: Generate Your Gradient

Now, it's time to generate our gradient. We're going to be using custom CSS to apply this gradient , so our favorite tool to preview, edit, and generate colors and gradients is

You can browse through pre-existing gradients, or create your own. In this example, we're just going to use the first gradient that appears on the examples page.

To copy the CSS for the Click the three buttons in the lower right hand corner, and then choose “copy CSS code”.

This will toggle a popup showing you multiple variations of ways to incorporate this gradient into your website using CSS.

You can simply copy and paste all of these, though we usually only go for the 2nd entry on this list:

background: linear-gradient(90deg, hsla(152, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%);Code language: HTTP (http)

Now that we've generated our gradient and converted it into custom CSS, it's time to apply it to your respective text.

If you need a more detailed guide on Coolors, we wrote one on how to use the tool here:

Step 3: Add Gradient To Elementor Text

To make text in Elementor be colored with a gradient, we're going to build a CSS code snippet that will be applied directly to that element.

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
Code language: CSS (css)

This is relatively easy to do. Simply copy and paste this code into the custom CSS for the respective element. In our example, we are applying a custom gradient to and Elementor H1 element. Under custom CSS, specify the text with a class, ID or “selector”, and then paste in the snippet.

IF you use a lot of custom CSS in your website, we recommend using CSSHero, not the built in CSS input in Elementor.

In this example screenshot, we have simply copied and pasted everything from the Coolors CSS output directly into the advanced custom CSS input in Elementor.


This article covered how you can easily apply gradient coloring to text in Elementor. If you're looking to spruce up your website and make it a bit unique, using this effect is a great way to do that.

Something that we should mention is that this effect will only apply to browsers that support the webkit properties. Virtually every modern browser supports this, but if you have visitors from older versions of Internet Explorer, this effect may not show up.

If you have any questions or comments about adding gradients to your Elementor website, don't hesitate to reach out in the comments below.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

This doesn't work as background applies to the entire widget, and has no CSS "color" attributes/

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram