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.

{ Background: PASTE CSS GRADIENT HERE -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.

Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
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
Inline Feedbacks
View all comments
Article By
James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
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