In this quick tutorial we're going to show you how to add a gradient background color to a button in Elementor. The base installation of Elementor and Elementor Pro do not have support for gradient backgrounds of any type. This is unfortunate, because it would be fairly easy to add to their well featured color picker.

Psst: If you like this article, give our "Gradient Text In Elementor" article a read too!

Luckily, adding gradient backgrounds to buttons in Elementor is fairly quick and easy. Let's jump right into it.

This is a two step process: first we're going to generate some custom CSS for our gradient button background, and then we're going to apply it to the button in Elementor. There are no additional plugins or tools needed here.

Step 1: Generate the gradient background for your Elementor button

We're only going to be using straight up CSS to apply the gradient background to our button, and to do that we need to create a simple code snippet.

#my-button { background: linear-gradient(-90deg, hsla(238, 100%, 71%, 1) 0%, hsla(295, 100%, 84%, 1) 100%); }

This is all you need to make your button Have a gradient background. The single line dictates that there will be a linear gradient with a 90 degree orientation. The following code shows the color that will be at position 0%, any color that will show at position 100%. Because it is a linear gradient, both of these colors will fade into each other, mixing completely at 50%.

You can choose to just write this out, but we recommend using a cool web app called Coolors.co to automatically generate this CSS code for you. For maximum compatibility, they also create several other lines of CSS that will apply gradient to your button background in Elementor, ensuring that this is supported on every single browser out there.

If you're interested in learning more, here is an article about how to use coolors.co to generate this gradient CSS.

Step 2: apply the custom CSS gradient background to your Elementor button

Now, all we need to do is apply this CSS to our Elementor button. First, ensure that the overall background color of the button in Elementor is disabled.

This is done by simply removing anything that shows in the color picker for the background color of your Elementor button.

Then, go to the advanced tab, navigate down to the custom CSS input, and simply copy and paste the code snippet generated in the first step.

And just like that, you've made a gradient colored button in Elementor, using nothing but CSS. If you found this article helpful, give it a share on Facebook or Reddit.

If you have any questions about adding gradient colors to Elementor buttons, reach out in our comment section below.