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.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to…

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive. So we are going to go over just how easy it is to implement outline text in Elementor. Let’s Begin…

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?