5/5

How To Apply Gradients To Text

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.
Final Result

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

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression...

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors...

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to...

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

Leave a Reply

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

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.