Title: Custom CSS for Elementor Author: Sayedul Sayem Published: October 19, 2021 Last modified: October 19, 2025 --- Search plugins ![](https://ps.w.org/custom-css-for-elementor/assets/banner-772x250.png?rev=2618830) ![](https://ps.w.org/custom-css-for-elementor/assets/icon-256x256.png?rev=2618830) # Custom CSS for Elementor By [Sayedul Sayem](https://profiles.wordpress.org/sayedulsayem/) [Download](https://downloads.wordpress.org/plugin/custom-css-for-elementor.2.1.1.zip) * [Details](https://wordpress.org/plugins/custom-css-for-elementor/#description) * [Reviews](https://wordpress.org/plugins/custom-css-for-elementor/#reviews) * [Installation](https://wordpress.org/plugins/custom-css-for-elementor/#installation) * [Development](https://wordpress.org/plugins/custom-css-for-elementor/#developers) [Support](https://wordpress.org/support/plugin/custom-css-for-elementor/) ## Description Custom CSS for Elementor is a handy tool for writing CSS codes within different devices like Desktops, Tablets & Mobile for Elementor Widgets. It will help you to not bother with writing media queries several times. Custom CSS for Elementor plugin comes with the default media query system. See the plugin’s GitHub repository [Custom CSS for Elementor](https://github.com/sayedulsayem/custom-css-for-elementor) ### 📢 Big Announcement – After getting several requests we have added live preview mode while styling with CSS. Now you can see the reflection instantly. No hassle of continual preview checks in the front end. Enjoy styling with CSS without any hassle. ### **Required Tools** * Elementor Free Only ### 📘 **How to Use Custom CSS for Elementor** First of all, it’s a plug-and-play tool. You will not get any setting page. So, after installing the Custom CSS for Elementor tool, just navigate to any Elementor Widget editing panel, then jump on the Advanced tab section; you will get a new accordion of Custom CSS for Elementor. Unfold the accordion, and you will get three different fields to write CSS codes for your widgets. If you want to show different designs for different devices, choose the device panels according to your needs. Direction: Edit any Elementor Widget > Advanced Tab > Custom Css for Elementor Note: According to general CSS logic, if you write CSS for a bigger screen (Desktop), it will be automatically implemented on smaller devices chronologically. If you want to change anything for a smaller screen, you have to write different CSS for smaller screens. In our Custom CSS for Elementor addon, if you want to add global CSS, just write CSS code in the desktop/global panel, and the code will be automatically implied to the other screen. If you want to change the CSS for Tablets, you have to write different CSS in our Tablet CSS panel. And same goes for mobile devices. If you want to change the CSS for Mobile devices, write different CSS in the Mobile CSS panel of our tool. Don’t forget to check the Screenshots below to get a clear overview of the tool. ### ❓ **Why You Need This** If you know the Elementor’s plenty of Dom creation issues, you will know the pain. But you can reduce so many bloated codes if you use simple CSS. But writing CSS for various devices, you need to be an expert on CSS as you have to deal with the Media Query every time. But our Custom CSS for Elementor addon will be the savior for you. We are handling the pain part of yours. Moreover, to add custom CSS, you don’t need to go to the Additional CSS of the theme customizer if you are using Elementor Free to manage your site as we build this tool for you. It’s just an advanced version of the Elementor Pro’s Default Custom CSS panel. ### 🔥 **What Are the Key Features of Elementor Custom CSS Plugin** As the essential tool, we have shared with you. But in short, here are the other features of the custom CSS addon for Elementor, * It’s a lightweight plugin that will use Elementor CSS files to enqueue custom CSS. Won’t generate any new CSS to reduce server requests. * You can face lacking options during change style through style control, but our Custom CSS for Elementor Addon will allow you to write CSS to overcome these lackings. * We prepared this tool by maintaining a World-class safety methodology. Also, we have run the malicious test, and it passed all the tests. * It works with any Elementor widget and other third-party Elementor addons widgets too. ### 💻 How to Change Breakpoints in WordPress To modify breakpoints for tablet and mobile devices in WordPress, you can add custom code to your theme’s `functions.php` file. Breakpoints determine when your website layout switches between different screen sizes, ensuring optimal display across devices. #### Changing Tablet Breakpoint To adjust the breakpoint for tablets, follow these steps: 1. Open your WordPress theme’s `functions.php` file. 2. Add the following PHP code snippet: 3. `add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints){ $default_breakpoints['tablet'] = 768; // change this value return $default_breakpoints;}, 20, 1); 4. Save the file. #### Changing Mobile Breakpoint To customize the breakpoint for mobile devices, use the following instructions: 1. Navigate to your theme’s `functions.php` file. 2. Insert the following PHP code: 3. `add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints){ $default_breakpoints['mobile'] = 425; // change this value return $default_breakpoints;}, 20, 1); 4. Save the changes. By adjusting these breakpoints, you can fine-tune your website’s responsiveness and ensure a seamless viewing experience across various devices. ### **PRIVACY POLICY** We are not collecting any of your personal data or any kind of logs. So there will be no chance to violate your privacy through this plugin. ### **For Technical Support** We all know nothing is perfect. But we all make everything perfect for everyone by sharing and caring. If you find any bug before giving us a negative rating, please report us [here](https://wordpress.org/support/plugin/custom-css-for-elementor/). We will definitely try to resolve your issue asap. Without your support, we cannot run this project so longer smoothly. ### **ABOUT THE MAKER** I am [Sayedul Sayem](https://sayedulsayem.com/), a Bangladeshi full-stack WordPress developer and free and open source enthusiast. As Custom CSS for Elementor is an open-source project, you can encourage me by giving me a [5* rating](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=5). Nothing also, you can contact me on my [LinkedIn](https://www.linkedin.com/in/sayedulsayem/) for consultation or just to say hello. I love talking to new people. So don’t hesitate. ## Screenshots * [[ * An section called “Custom CSS for Elementor” will appear on ADVANCED_TAB in any widget/ section/ column/ flexbox container on the Elementor editor. * [[ * Write CSS for desktop. * [[ * Desktop preview with input CSS. * [[ * Write CSS for tablet. * [[ * Tablet preview with input CSS. * [[ * Write CSS for mobile. * [[ * Mobile preview with input CSS. ## Installation 1. Upload the plugin folder after extracting it to the “/wp-content/plugins/custom- css-for-elementor” directory. Alternatively, install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‘Plugins’ screen in WordPress 3. Now drag and drop an Elementor widget and go to the “Advanced Tab” of that widget. 4. There will show up a new section called “Custom CSS for Elementor”. Write your CSS to change your widget magically. Go to preview to see the changes. For a more detailed explanation, check out the following [documentation](https://wordpress.org/support/article/managing-plugins/#installing-plugins). ## FAQ ### Will this plugin automatically work after activation? Yes. You don’t need to do anything else other than activate the plugin. ### Is there any security thread after activating this plugin? No. This plugin is highly secure. It will sanitize user input so that the user can’t face any scripting attack. ## Reviews ![](https://secure.gravatar.com/avatar/d53939faa54b5bf9d5902f9a54007a46cc83ad8fb7f906b7235258fda012d7d0? s=60&d=retro&r=g) ### 󠀁[Awesome css plugin for elementor with responsive feature](https://wordpress.org/support/topic/awesome-css-plugin-for-elementor-with-responsive-feature/)󠁿 [shahinsheikh](https://profiles.wordpress.org/shahinsheikh/) December 23, 2025 I like this plugin because it has responsive feature which make adding custom css more easy. A+ ![](https://secure.gravatar.com/avatar/90f655c21a7aa4969a49257967f4fb45090e08b2e90506a4c18ecbbce99901f3? s=60&d=retro&r=g) ### 󠀁[Simple and to the point](https://wordpress.org/support/topic/simple-and-to-the-point-44/)󠁿 [esamzenhom](https://profiles.wordpress.org/esamzenhom/) December 3, 2024 1 reply Simple and to the point ![](https://secure.gravatar.com/avatar/c80db2c7b92933356f2a30b1fb434d132086dedc14015ad8bdc9cdaed54237bd? s=60&d=retro&r=g) ### 󠀁[interesting but](https://wordpress.org/support/topic/interesting-but-5/)󠁿 [spithz](https://profiles.wordpress.org/spithz/) October 5, 2023 3 replies The now very important clamp function doesn’t work and there is no custom css in the page settings ![](https://secure.gravatar.com/avatar/a63368349ce2dbe5bdde05c66f46c2203713b4a6985f8b0df9932d0beefdc7c4? s=60&d=retro&r=g) ### 󠀁[Awesome Idea](https://wordpress.org/support/topic/awesome-idea-14/)󠁿 [amramorov](https://profiles.wordpress.org/amramorov/) February 17, 2022 1 reply Awesome Idea ![](https://secure.gravatar.com/avatar/e3749e6be20fe6d02c820fdb0ce24bd73b1a19b4efed232749d3b06ede033808? s=60&d=retro&r=g) ### 󠀁[Excellent DX](https://wordpress.org/support/topic/excellent-dx/)󠁿 [chorompotro](https://profiles.wordpress.org/chorompotro/) February 10, 2022 1 reply The developer experience this addon offers is other worldly. I’ve had do insert some CSS tweaks while using Elementor and having this plugin is a godsend. Now i can say goodbye to hopping back and forth between theme editor and use custom CSS right from the editor. It solves one of those problems that you wouldn’t know you have unless you encounter the solution. ![](https://secure.gravatar.com/avatar/602dade5207e3755126d103c19a37daae0ada8545435f26fcc3a65101ea0747c? s=60&d=retro&r=g) ### 󠀁[Awesome Idea](https://wordpress.org/support/topic/awesome-idea-13/)󠁿 [iqbalrony](https://profiles.wordpress.org/iqbalrony/) February 10, 2022 1 reply This is a very useful and convenient plugin for elementor users. [ Read all 9 reviews ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/) ## Contributors & Developers “Custom CSS for Elementor” is open source software. The following people have contributed to this plugin. Contributors * [ Sayedul Sayem ](https://profiles.wordpress.org/sayedulsayem/) * [ Kamal Hosen ](https://profiles.wordpress.org/ikamal/) * [ Gobinda Tarafdar ](https://profiles.wordpress.org/gtarafdarr/) “Custom CSS for Elementor” has been translated into 2 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/custom-css-for-elementor/contributors) for their contributions. [Translate “Custom CSS for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/custom-css-for-elementor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/custom-css-for-elementor/), check out the [SVN repository](https://plugins.svn.wordpress.org/custom-css-for-elementor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/custom-css-for-elementor/) by [RSS](https://plugins.trac.wordpress.org/log/custom-css-for-elementor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 2.1.1 * Fix: Compatible with Elementor 3.32.x and Elementor Pro 3.32.x * Fix: Compatible with WordPress 6.8.x #### 2.1.0 * New: Filter added for changing breakpoints. #### 2.0.0 * New: Live CSS generate on editor panel while writing CSS. #### 1.3.1 * Fix: Compatible with Elementor 3.16.x and Elementor Pro 3.16.x * Fix: Compatible with WordPress 6.3.1 #### 1.3.0 * New: Added support for the Flexbox Container. #### 1.2.0 * New: Support for the Column. * New: Support for the Section. #### 1.1.0 * Fix: CSS input UI change and clean. * Fix: CSS rules adjusted with normal CSS workflow. #### 1.0.0 (19-10-2021) * Initial release. ## Meta * Version **2.1.1** * Last updated **6 months ago** * Active installations **5,000+** * WordPress version ** 5.0 or higher ** * Tested up to **6.8.5** * PHP version ** 7.4 or higher ** * Languages * [Bengali (Bangladesh)](https://bn.wordpress.org/plugins/custom-css-for-elementor/), [Chinese (China)](https://cn.wordpress.org/plugins/custom-css-for-elementor/), and [English (US)](https://wordpress.org/plugins/custom-css-for-elementor/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/custom-css-for-elementor) * Tags * [css](https://wordpress.org/plugins/tags/css/)[custom css](https://wordpress.org/plugins/tags/custom-css/) [elementor](https://wordpress.org/plugins/tags/elementor/)[elementor addons](https://wordpress.org/plugins/tags/elementor-addons/) [responsive css](https://wordpress.org/plugins/tags/responsive-css/) * [Advanced View](https://wordpress.org/plugins/custom-css-for-elementor/advanced/) ## Ratings 4 out of 5 stars. * [ 6 5-star reviews ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=5) * [ 1 4-star review ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=2) * [ 2 1-star reviews ](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/custom-css-for-elementor/reviews/) ## Contributors * [ Sayedul Sayem ](https://profiles.wordpress.org/sayedulsayem/) * [ Kamal Hosen ](https://profiles.wordpress.org/ikamal/) * [ Gobinda Tarafdar ](https://profiles.wordpress.org/gtarafdarr/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/custom-css-for-elementor/)