How to create gradient text and button in elementor

Ananda Projapati
Last Updated: January 26, 2021

Do you want to use gradient text or gradient button in your elementor website?

Well, there are some free and paid plugins out there that you can use to achieve this but in case you are just looking for these simple features which can be done with simple CSS then why add an extra plugin?

In this video, I’ll show you how you can create gradient text and button in elementor with just simple CSS.

You can use a free gradient generator tool called Cssgradient to generate the gradient CSS and then use it in your widgets custom css section.

Watch the video here

/* Heading - Change the selector tag (h2) according to your requirement */
selector h2{
    background: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(7,0,221,1) 100%);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Paragraph */
selector p{
    background: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(7,0,221,1) 100%);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Button */
selector a{
    background: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(7,0,221,1) 100%);
    background-size: 200% auto;
}
selector a:hover{
    background-position: right center;
}

For Elementor Free

In case you are using the Elementor free version which doesn’t have this Custom css option, you need to add a class name to the widget like this

Once the class is added you need to modify the CSS a bit and add it to your theme customizer or child theme css or in a CSS plugin where ever you add your custom css.

/* Heading or paragraph */
.gradient-txt{
    background: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(7,0,221,1) 100%);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Button */
.gradient-btn a{
    background: linear-gradient(90deg, rgba(0,242,255,1) 0%, rgba(7,0,221,1) 100%);
    background-size: 200% auto;
}
.gradient-btn a:hover{
    background-position: right center;
}

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Plugins used: