How to Create a Gradient Heading in Elementor

When creating a web page or template with Elementor, you can make a little experiment with the heading element to make the page you are creating looks standout. One of the experiments you can try is by adding a gradient effect to the heading element. This post will show you how.

The Elementor’s native Heading widget offers no option to set a gradient effect. You can only use the solid color for the heading text. You can add a custom CSS to add a gradient effect to the heading element in Elementor. Custom CSS itself is only available on Elementor Pro so you need to upgrade your Elementor to the pro version if you haven’t done so (read: Elementor Free vs Elementor Pro).

Adding gradient effect to the heading element in Elementor

Assuming you have upgraded your Elementor to the pro version, create a new page/template and edit it with Elementor. Or, you can also edit an existing one. Add the Heading widget to the canvas area.

On the Title block under the Content tab, select a heading level on the HTML Tag option. You can use any heading level. You will need it as the CSS selector.

Go to the Advanced tab and open the Custom CSS block and paste the following CSS code.

selector h2 {
    background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
    -webkit-background-clip: text;
    display: inline-block;
    padding: 14px;
    -webkit-text-fill-color: #00000000;
}

Make sure to tailor the selector with the heading level you selected on the previous step.

You can change the colors by pasting the hex code of the colors you like on the background-image property.

Or, you can also use the following code to create a gradient heading with more colors on the gredient.

selector .elementor-heading-title
{
     background: linear-gradient(90deg,red,blue,black) ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
    
}

The easier way to create a gradient heading in Elementor

If adding CSS looks scary for you, there is an easier way to create a gradient heading in Elementor: by installing an add-on. Two add-ons that allow you to create a gradient heading is Happy Addons and Raven. Happy Addons is a freemium add-on and the widget to create a gradient heading (called Gradient Heading) is available on the free version. You will be able to set the gradient type (radial or linear), gradient position, and location.

The Raven’s Heading widget also offers the same gradient setting options as Happy Addons. However, you need to buy the Jupiter X theme to use Raven as the add-on is built exclusively for the Jupiter X theme.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

The article above may contain affiliate links, which help support WP Pagebuilders.

Subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This