---
title: "How to Add Custom CSS in Elementor for Free [2026]"
url: https://theplusaddons.com/blog/add-custom-css-in-elementor/
date: 2023-08-22
modified: 2026-04-27
author: "Aditya Sharma"
description: "Elementor's visual controls cover most design needs. But there are moments when you need to adjust spacing, override a default style, or target a nested element the editor doesn't expose...."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Add-Custom-CSS-in-Elementor-for-Free-1024x536.png
word_count: 1315
---

# How to Add Custom CSS in Elementor for Free [2026]

## Key Takeaways

- Custom CSS in Elementor allows users to write CSS rules directly within the editor or WordPress for precise styling adjustments.
- The Plus Addons for Elementor includes a Custom CSS field in the Plus Extras section, allowing container-level CSS alongside 120+ widgets.
- Elementor Pro users can access a dedicated Custom CSS field in the Advanced tab of every widget, section, and container for isolated control.
- The WordPress Theme Customizer provides a site-wide Additional CSS panel that requires no Elementor plan and is available on any WordPress install.

Elementor's visual controls cover most design needs. But there are moments when you need to adjust spacing, override a default style, or target a nested element the editor doesn't expose. That's where custom CSS solves the problem directly.

Custom CSS in Elementor means writing CSS rules within the editor or WordPress to style elements beyond what the drag-and-drop controls allow. A single rule can hide a border, fix a mobile spacing issue, or match a client's exact brand color, in seconds.

This guide covers 4 methods to add custom CSS in Elementor, two that work with Elementor Free, and two that require a paid plan. You'll know exactly which method to use for each scenario.

*All steps in this article were verified on WordPress 6.9.4 with Elementor 4.0.3 and The Plus Addons for Elementor v6.4.13 in April 2026.*

Table Of Contents

## What Is Custom CSS in Elementor?

Custom CSS in Elementor is CSS code you write directly within Elementor or WordPress to apply styles that the visual panel doesn't include, such as hover effects, precise spacing overrides, or targeting nested HTML elements inside a widget that the editor doesn't expose in its controls.

![CSS style sheet example for adding custom CSS in Elementor](https://theplusaddons.com/wp-content/uploads/2023/08/css-style-sheet-1.png)

CSS (Cascading Style Sheets) is the language browsers use to display HTML elements visually, controlling colors, fonts, spacing, and layout. Every setting in Elementor's control panel generates CSS behind the scenes. Adding custom CSS means writing those rules directly, bypassing the visual controls entirely.

For instance, you can use custom CSS to [convert Figma to WordPress](https://theplusaddons.com/blog/convert-figma-to-wordpress/) designs pixel-perfectly, or to [hide a page title in Elementor](https://theplusaddons.com/blog/how-to-hide-page-title-in-elementor/) with a single CSS snippet.

### Benefits of Adding Custom CSS in Elementor

- **Precision**: Target exact elements using CSS selectors, including child elements Elementor doesn't expose in its panel.

- **Scope control**: Apply styles globally, per page, or per widget, depending on the method you choose.

- **Performance**: Well-scoped CSS loads only where needed, keeping page weight low.

- **Flexibility**: Add hover effects, animations, or responsive rules that Elementor's visual panel doesn't offer.

*Building your Elementor site on the right host makes a difference. Compare the [**Best WordPress Hosting for Elementor**](https://theplusaddons.com/blog/best-wordpress-hosting-for-elementor/) to find the right fit.*

## How to Add Custom CSS in Elementor? (4 Methods)

These 4 methods cover different use cases and plan requirements. Two work with Elementor Free; two require a paid plan. Pick the one that matches your scope and setup.

| Method | Plan Required | Scope | Best For |
| ------ | ------------- | ----- | -------- |
| HTML Widget | Elementor Free | Page-specific | CSS on a single page |
| WordPress Theme Customizer | WordPress core (free) | Site-wide | Global styles on classic themes |
| Elementor Pro Custom CSS | Elementor Pro | Per widget/section | Precise element-level targeting |
| The Plus Addons for Elementor Custom CSS | The Plus Addons for Elementor Pro | Per container/section | Container-level CSS alongside 120+ widgets |

### 1. How to Add Custom CSS with the Elementor HTML Widget (Free)

The Elementor HTML widget accepts raw HTML, including `<style>` tags. This lets you write CSS scoped to any specific page without needing Elementor Pro.

- Open the page where you want to add CSS in the Elementor editor.

- Drag the **HTML** widget from the widget panel onto the page.

![Dragging the HTML widget in Elementor editor to add custom CSS](https://theplusaddons.com/wp-content/uploads/2023/08/Drag-HTML-widget.png)

- Click the HTML widget to open its settings panel on the left.

- In the HTML content area, write your CSS wrapped inside `<style>` tags:

`<style>
.your-css-selector {
color: #333333;
padding: 16px;
}
</style>`

- Click **Update** to save your changes and preview the result.

The CSS applies on the page where the widget is placed. Use specific class names, like Elementor's generated classes (e.g., `.elementor-widget-container`), to target exact elements. In our testing across Elementor Free installs, this approach handles page-specific CSS reliably without any Pro plan.

**Elementor Pro users:** Every widget's Advanced tab includes a dedicated **Custom CSS** field, no `<style>` tags needed. CSS written there auto-scopes to that specific widget and loads only on pages where it appears.

*Did you know you can apply widget changes globally across your Elementor site? Learn [**How to Use the Elementor Global Widget in this step-by-step guide**](https://theplusaddons.com/blog/how-to-use-elementor-global-widget/).*

### 2. How to Add Custom CSS via the WordPress Theme Customizer (Free)

The WordPress Theme Customizer includes a built-in Additional CSS panel. CSS added here applies site-wide and requires no Elementor plan, it's a core WordPress feature available on any install.

- In your WordPress admin dashboard, go to **Appearance > Customize**.

![WordPress Customizer menu showing the Additional CSS option](https://theplusaddons.com/wp-content/uploads/2023/08/WordPress-Customizer.png)

- In the Customizer left panel, click **Additional CSS**.

- Enter your CSS code in the text area. Your changes preview in real time on the right.

- Click **Publish** to save.

This method works with classic WordPress themes. If you're using a block-based (Full Site Editing) theme on WordPress 6.x, such as Twenty Twenty-Four, the Additional CSS panel may not appear in the same location. FSE themes handle global styles through the Site Editor instead.

Looking to add code snippets to WordPress for free without any coding? Watch this tutorial:

https://youtu.be/e2sczKITUhs?si=ZiblBAp4QlofF3Qq

*Need to add JavaScript as well? Here are [**2 free methods to add custom JavaScript in Elementor**](https://theplusaddons.com/blog/add-custom-javascript-in-elementor/).*

### 3. How to Add Custom CSS with Elementor Pro (Pro)

[**Elementor Pro**](https://go.posimyth.com/recommends/elementor/) adds a Custom CSS field inside the Advanced tab of every widget, section, and container. CSS written here scopes automatically to that element and loads only on pages where it appears, which keeps performance clean on large sites.

- Open the Elementor editor and select the widget or section you want to style.

- Click the **Advanced** tab in the left settings panel.

- Scroll down to **Custom CSS** and expand it.

- Write your CSS in the editor. Use `selector` as a placeholder, Elementor automatically replaces it with that element's unique ID at render time: `selector h2 { font-size: 28px; }`

- Click **Update** to save.

Changing one widget's custom CSS does not affect other widgets of the same type elsewhere on your site. This makes Elementor Pro's approach reliable for complex multi-page projects where you need isolated, element-level control.

*Want to test Elementor locally before going live? Follow this [**step-by-step guide on How to Install Elementor in Localhost**](https://theplusaddons.com/blog/how-to-install-elementor-in-localhost/).*

### 4. How to Add Custom CSS with The Plus Addons for Elementor (Pro)

[**The Plus Addons for Elementor**](https://theplusaddons.com/) by POSIMYTH Innovations includes a Custom CSS field inside the “Plus Extras” section of Elementor's Advanced tab. As of v6.4.13 (April 2026), the plugin has [100,000+ active installs](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) and a 4.6/5 rating on WordPress.org.

To use this method, install and activate **The Plus Addons for Elementor Pro**, then follow these steps:

- Open the Elementor editor and select the container or section you want to style.

- Click the **Advanced** tab in the settings panel.

- Scroll down to **Plus Extras** and expand it.

- Locate the **Custom CSS** field and enter your CSS code.

- Click **Update** to save your changes.

The Plus Addons for Elementor also includes custom JS, PHP, and HTML snippet injection inside the same Plus Extras panel, no separate plugin needed for code injection. Beyond custom CSS, The Plus Addons for Elementor includes [120+ widgets](https://theplusaddons.com/elementor-widget/) (Pro) and 35+ free widgets, 8 builders, and advanced extras like Display Conditions and Glassmorphism. See all available [Elementor Extras and Extensions](https://theplusaddons.com/elementor-extras/extensions/).

Check out the [**Complete List of 120+ Widgets and Extensions**](https://theplusaddons.com/elementor-widgets/) here. Start building your dream website without coding!

![](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg)

##### Do you Manage WordPress Websites?
Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
​

[contact-form-7]

Field LabelSend Me the eBook

## Which Custom CSS Method Should You Use?

The right method depends on your plan and how broadly you need the CSS to apply.

| Scenario | Recommended Method |
| -------- | ------------------ |
| On Elementor Free, need CSS on one page | HTML Widget with <style> tags |
| Need site-wide CSS, using a classic WordPress theme | WordPress Theme Customizer |
| Have Elementor Pro, need per-element control | Elementor Pro Custom CSS (Advanced tab) |
| Using The Plus Addons for Elementor, need container-level CSS | The Plus Addons for Elementor: Plus Extras > Custom CSS |

In our testing across multiple WordPress projects, the HTML widget approach handles one-off page styles reliably when you don't have a Pro plan. For ongoing styling work across multiple pages or elements, a dedicated per-element CSS field is easier to maintain and debug.

If you regularly need CSS alongside other customizations, [The Plus Addons for Elementor Custom CSS Extra](https://theplusaddons.com/elementor-extras/custom-css/) gives you CSS, JS, PHP, and HTML snippets all in one panel, without installing separate plugins. [Compare free vs pro plans](https://theplusaddons.com/free-vs-pro/) to see what's included, or check [The Plus Addons for Elementor pricing](https://theplusaddons.com/pricing/) to get started.

Need more than CSS? Learn how to [add custom JavaScript in Elementor](https://theplusaddons.com/blog/add-custom-javascript-in-elementor/) as well.

## Frequently Asked Questions

**Q: What if my custom CSS in Elementor isn't applying?**
A: If your custom CSS isn't applying, check for specificity issues. CSS rules can be overridden by more specific selectors or inline styles. Ensure your CSS is correctly targeting the elements you want to style. Using the HTML widget to add CSS can help, as it allows you to directly input your styles without interference from other stylesheets.

**Q: What are the best practices for adding custom CSS in Elementor?**
A: When adding custom CSS in Elementor, aim for clarity and maintainability. Use comments in your CSS to explain complex rules, and keep your styles organized. Avoid overusing custom CSS, as excessive styles can slow down your site. For more extensive changes, consider using The Plus Addons for Elementor, which provides pre-built CSS styles to enhance your design efficiently.

**Q: How do I add custom CSS for free in Elementor?**
A: To add custom CSS for free in Elementor, use the built-in Custom CSS feature available in the Site Settings panel. This method allows you to enter your CSS code directly in a text box, making it easy to apply styles site-wide without needing additional plugins or tools.

**Q: Is it safe to add custom CSS in Elementor?**
A: Adding custom CSS in Elementor is generally safe if you are familiar with CSS syntax. However, it's wise to back up your site before making significant changes. Improper CSS can lead to layout issues or conflicts, so test your changes thoroughly to ensure they don't negatively impact your site's performance.

**Q: How do I remove custom CSS from Elementor?**
A: To remove custom CSS from Elementor, navigate to the Advanced tab of the widget where the CSS was added and delete the code from the Custom CSS box. If you added CSS through the Theme Customizer or a plugin, you would need to access those settings to remove the code. Regularly cleaning up unused CSS can help maintain site performance.