Advanced Custom CSS for Elementor

Advanced Custom CSS for Elementor (ACCE) adds a dedicated Custom CSS section to the Advanced tab of every Elementor widget. It lets you write clean, widget-scoped CSS using the selector keyword and provides separate fields for Desktop, Tablet, and Mobile styling.

No premium version required — works with both Elementor Free and Elementor Pro.

Perfect for users and developers who need fast, responsive CSS control directly inside the Elementor editor.

Features

• Adds a Custom CSS panel to all Elementor widgets.
• Separate CSS fields for Desktop, Tablet, and Mobile.
• Supports the selector keyword for precise widget-only CSS.
• Uses Elementor's live preview for instant visual updates.
• Breakpoints can be customized with a simple filter.
• Lightweight, fast, and requires no additional settings.

Usage

In Elementor editor:

1. Select any widget.
2. Open the Advanced tab.
3. Scroll down to ACCE Custom CSS.
4. Add your CSS using the selector keyword.

Example:

selector { background: #f3f3f3; border-radius: 8px; }

Developer Notes

You can override the default breakpoints (Tablet: 768px, Mobile: 425px) using this filter:

add_filter('ACCE_custom_css_breakpoints', function($defaults) { return [ 'tablet' => 900, 'mobile' => 600, ]; });

License

This plugin is licensed under the GPLv2 or later.