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:
Here are some of my favorite website building tools
Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.
Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.
Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.
Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.
Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.
3 thoughts on “How to create gradient text and button in elementor”
Hi Ananda!ñ And gradient css for the border buttom?ñ thanks!
Hi Nicanoe you can check this article and apply some of the techniques mentioned here.
https://css-tricks.com/gradient-borders-in-css/
Hope this helps!
Hello Ananda!
Thanks so much for all the tips! I was wondering if there is CSS for changing the numbers and text in a Counter Widget to gradient also?
Much appreciated,
D