Elementor gradient button - Elementor gradient text Tutorial[ 2 Easy Methods]

Hey designers! Wondering how to add Elementor gradient text or Elementor gradient button to your WordPress websites?

In this video, I show you to how to add multiple colours to gradients in the text, button, text editor or even icon box text widgets.

**If you're using the Elementor free version follow the instructions in the video and find the style tags in the first comment**

Copy the code snippets from below[for Pro version] :

/*Code for gradient heading widget*/
selector{
background-image: linear-gradient(135deg, red,blue,wheat,pink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*Code ends above*/

/*Code for gradient button widget*/
selector .elementor-button {
background-image: linear-gradient(to bottom right,red,blue);
}
/*Code ends above*/

/*Code for gradient rich text editor text*/
selector .elementor-text-editor
{
background-image: linear-gradient(135deg, red,blue,wheat,pink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*Code ends above*/

/*Code for gradient icon box text*/
selector .elementor-icon-box-description {
background-image: linear-gradient(red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*Code ends above*/

Happy designing and peace!

**Some Important Links**

Elementor Custom Breakpoints Tutorial:

Customise your website:

[wpalgoridm]

Add the code between the following tags and modify em if you're using Elementor free version:
<style>

</style>

[johnboyd]

Thank You for taking the time to explain how this works. I have struggled with how to find what the name of the element is and your explanation was very fast and precise. I plan on using your CSS for a site I am building. I'm looking forward to what other things you will be sharing.

[paulluxford]

Exactly what I wanted. Thank you so very much :-)

[DragFitness]

hello, can you do this for the menu? if I have home, about, contact in the menu.. can I have gradient colors in menu? thanks!

[souravghoshal]

Hi Karthik, can you help me make all my buttons, search symbol and mobile menu bar in gradient? Also, if there's a way a to set one gradient for all these mentioned

[prluv]

Hi, I need help with my Elementor… thought of giving up from trying and trying and nothing... I could drag but I cant drop the Elements once I use Elements in a page. I tried taking out plugins.... there is no cache activated... so what could it possibly be? any missing code? I tried and tried please Help!

[prluv]

I tried in chrome but not in Mozilla... any other solutions?

[gaelle]

Thanks for this great tutorial end the update for the nav menu in the comments 👍🏻