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:

my-gradient

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

The CSS

Here is the CSS we will be using:

.my-gradient h2 {
   background: -webkit-linear-gradient(#051937, #EB12EB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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.

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