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

Updated onApril 27, 2026By

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

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 designs pixel-perfectly, or to hide a 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 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.

MethodPlan RequiredScopeBest For
HTML WidgetElementor FreePage-specificCSS on a single page
WordPress Theme CustomizerWordPress core (free)Site-wideGlobal styles on classic themes
Elementor Pro Custom CSSElementor ProPer widget/sectionPrecise element-level targeting
The Plus Addons for Elementor Custom CSSThe Plus Addons for Elementor ProPer container/sectionContainer-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.

  1. Open the page where you want to add CSS in the Elementor editor.
  2. Drag the HTML widget from the widget panel onto the page.
Dragging the html widget in elementor editor to add custom css
  1. Click the HTML widget to open its settings panel on the left.
  2. In the HTML content area, write your CSS wrapped inside <style> tags:
<style>
.your-css-selector {
  color: #333333;
  padding: 16px;
}
</style>
  1. 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.

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.

  1. In your WordPress admin dashboard, go to Appearance > Customize.
Wordpress customizer menu showing the additional css option
  1. In the Customizer left panel, click Additional CSS.
  1. Enter your CSS code in the text area. Your changes preview in real time on the right.
  2. 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:

YouTube video

Need to add JavaScript as well? Here are 2 free methods to add custom JavaScript in Elementor.

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

Elementor Pro 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.

  1. Open the Elementor editor and select the widget or section you want to style.
  2. Click the Advanced tab in the left settings panel.
  3. Scroll down to Custom CSS and expand it.
  1. 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; }
  2. 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.

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

The Plus Addons for Elementor 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 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:

  1. Open the Elementor editor and select the container or section you want to style.
  2. Click the Advanced tab in the settings panel.
  3. Scroll down to Plus Extras and expand it.
  4. Locate the Custom CSS field and enter your CSS code.
  1. 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 (Pro) and 35+ free widgets, 8 builders, and advanced extras like Display Conditions and Glassmorphism. See all available Elementor Extras and Extensions.

Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

20 checklist for wordpress site maintenance how to add custom css in elementor for free [2026] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​
[contact-form-7 id="125716"]

Which Custom CSS Method Should You Use?

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

ScenarioRecommended Method
On Elementor Free, need CSS on one pageHTML Widget with <style> tags
Need site-wide CSS, using a classic WordPress themeWordPress Theme Customizer
Have Elementor Pro, need per-element controlElementor Pro Custom CSS (Advanced tab)
Using The Plus Addons for Elementor, need container-level CSSThe 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 gives you CSS, JS, PHP, and HTML snippets all in one panel, without installing separate plugins. Compare free vs pro plans to see what’s included, or check The Plus Addons for Elementor pricing to get started.

Need more than CSS? Learn how to add custom JavaScript in Elementor as well.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Linkedin Twitter Globe-americas

Related Frequently Asked Questions

What if my custom CSS in Elementor isn't applying?

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.

What are the best practices for adding custom CSS in Elementor?

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.

How do I add custom CSS for free in Elementor?

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.

Is it safe to add custom CSS in Elementor?

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.

How do I remove custom CSS from Elementor?

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.

Last reviewed: April 27, 2026

Related Blogs