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.
Go to the Advanced tab and open the Custom CSS block and paste the following CSS code.
The code:
selector .elementor-heading-title {
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
-webkit-background-clip: text;
display: inline-block;
padding: 14px;
-webkit-text-fill-color: #00000000;
}
You can change the colors by pasting the hex code of the colors you like on the background-image
For more gradient options, you can read our posts here and here.
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.
