How To Apply Gradients To Text

Difficulty Rating :
Written byAires DaGraca

Greetings all, for todays Elementor tutorial I am going to show you how to apply gradients to your text. The process is very simple and it will add some some flair to your designs.

As usual I will be using the Hello Theme and Elementor Pro as my working environment.

Let’s Begin

Start by dragging a heading widget to the page by default the text is given an H2 tag for this example this is ok.

If you need to adjust the text size do it next.

I would suggest you leave the text color as the default to insure your CSS doesn’t get overwritten.

Next we need to open the advanced options and give the heading widget a class so that we can target it. I have chosen to use:

You can use any class you like just remember to swap it out in the appropriate places.


Here is the CSS we will be using:

For this CSS to work a couple things need to be true:

  • Your class in your heading widget needs to match the class in the CSS.
  • Your heading needs to have the correct HTML tag. Remember I said in the beginning that by default it is set to H2 so if you decide to change it to H3 do so in the CSS as well.
Final Result

Apply this css to your child theme or customizer and enjoy the awesomeness that is CSS.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Leave a Comment

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

By visiting you accept our use of cookies and agree to our privacy policy.