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:

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 Coolors.co.

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: https://isotropic.co/guide-to-coolors-co-2020/

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. https://isotropic.co/csshero-and-elementor-powerful-custom-css/

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.

Conclusion

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.