How to Add Custom CSS in Elementor Free Version

The custom CSS can be applied to every Elementor section, column, and widget. Adding CSS (Cascading Style Sheet) into the Custom CSS field is to style and decorate the sections, columns, and widgets. It also can take a basic HTML page to transform into a modern-looking design.

However, the Elementor Custom CSS is a feature that is only accessible on Elementor Pro. But don’t worry, we have a solution for you if you’re using the free version of Elementor but want to add custom CSS to your Elementor. This article will show you how to do that.

How to Add Custom CSS in Elementor Free Version

In this example, we want to give you the CSS code to assign a multi-color gradient button in Elementor. The CSS code below only works if you add to the Custom CSS field on the Advanced tab on the settings panel, which is you need to upgrade to Elementor Pro to access that feature.

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;

To use that code to assign a multi-color gradient button in the free version of Elementor, you need to edit it and do some steps that we will explain later.

Step 1: Add the Additional CSS Code

We will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings panel, go to the Additional CSS block and click on it. Copy the CSS code above and paste it into the Additional CSS field.

As we mentioned, you need to edit the CSS code to assign a multi-color gradient button. Remove the selector text and replace it with a custom unique CSS ID. You can put any CSS ID into the code; in this example, we will give it #button1

Note: Add your custom unique CSS ID beginning with the pound key/ hashtag (#) and without spacing.

Once you’ve edited the CSS code, apply it by clicking the Publish button.

Step 2: Add the Elementor CSS ID

Alright, we will move on to the next step. We will add a unique CSS ID to call the CSS code applied in the Additional CSS.

Go to your Elementor editor. Afterward, please select the button widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the button widget, you can edit and style up the widget to your preference.

On the Button widget settings panel, navigate to the Advanced tab -> Layout -> CSS ID. Next, please input a custom unique CSS ID you previously added in the Additional CSS.

Note: Add your custom unique CSS ID without the pound key/ hashtag (#) and spacing.

As you can see from the GIF above, the button is a multi-color gradient when you add the custom unique CSS iD. Don’t forget to save your project by clicking the Save Draft button.

Well. Let’s say you want to add a multi-color gradient for another button widget with a different multi-color gradient.

First, go back to the Additional CSS field and then copy and paste the existing code at the end of Additional CSS. Once you’ve pasted it, please replace your custom unique CSS ID with a new one and then edit the CSS snippet more specifically on the declaration block of the CSS. In this example, we replace a CSS ID with #button2

Declaration block CSS begins with a left curly brace (‘{‘) and ends when a matching right curly brace (‘}‘) is reached.

You can create a gradient using CSS gradient online tools to get the declaration block. Click here to see some CSS gradient online tools that we recommend.

Once you’ve edited your new CSS code, apply it by clicking the Publish button.

Next, go back to your Elementor editor, then reload your page. Add a new Button widget, then edit and style up if you want to. On the Button widget settings, navigate to the Advanced tab -> Layout -> CSS ID. Afterward, please input your new custom unique CSS ID on the CSS ID field.

That’s it. As you can see from the image above, now you have two buttons with different multi-color gradients. Save your project or publish it if you want to.

The Bottom Line

This article shows you how to add custom CSS in the free version of Elementor. With a few tricks, you can make your Elementor free look like Elementor Pro.

In our opinion, this tutorial is good for you if you’re new to WordPress and Elementor. But, if your website is growing or even established, we recommend upgrading to Elementor Pro. Besides all the features and benefits offered, with Elementor Pro, you can work more efficiently.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?