Gradient Text With Elementor

Published: August 2, 2020

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%);

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;

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 Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Notify of
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.


A relationship driven website creation company.


© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram