Boost your WordPress CSS editing capability

The live CSS editor for learners and Pros

Microthemer is a point-and-click CSS editor plugin for WordPress that helps site builders of any level design like a pro.

Easily create CSS grid layouts, design responsively, integrate with your favourite page builder (optional), use Sass, and get expert CSS help.

Buy now Live demo

Love it, or get your money back.
No questions asked.

Dark Interface
Make anything
CSS variables
& Sass support
Drag & drop
CSS grid layouts
Trusted Brands 4

Live CSS editing

Your style edits appear on screen instantly, whether you use the visual styling options, the code editor, or a combination of the two. And to help ensure you always select the right element, Microthemer's HTML inspector displays the underlying HTML code for the elements you select. This feature makes Microthemer the best live CSS editor for real world projects, and the perfect tool to take your understanding of HTML and CSS to the next level.

Live Edit

Customize anything

Style any part of any WordPress page, from header to footer. This includes Gutenberg (or classic editor) post and page content, custom posts, hard-coded theme or plugin content, page builder content - you name it. Microthemer works seamlessly with your favourite WordPress tools to give you developer-level design control in a few clicks.


150+ CSS styling options

Enjoy the largest set of CSS styling options provided by any WordPress CSS editor (150+). Choose from modern styles like animations, transitions, transforms, filters, flexbox, and CSS grid to web design essentials like typography, position, spacing, sizing, and backgrounds. The style fields will speed up your workflow significantly without sacrificing any control; you can switch back and forth between the style fields and the code editor as you please.


Drag and drop CSS grid

CSS grid solves age old web design problems with columns that don't vertically align, adapt to different screen sizes easily, or space apart without unwanted peripheral space. The only downside is the steep learning curve. But Microthemer's visual drag and drop controls bring the power of CSS grid to the masses. You can create beautiful web layouts using CSS grid in seconds. It's so much easier than the old way it almost feels like cheating.

Interactive CSS Grid Demo


Easy Google fonts

Save time and effort by visually browsing Google fonts without leaving the Microthemer interface. You can then insert the font you want with a single click. This dramatically simplifies experimenting with different Google fonts and ensures your site only loads the minimum fonts and variations needed for your design - no unnecessary font files.


Responsive design

Microthemer takes the pain out of responsive design. Some common breakpoints are provided to help you get started, but are entirely customizable. Use the responsive tabs or drag the top ruler to check how your site looks on different screen sizes, and then fix any issues. This feature is super useful for creating pixel perfect layouts on mobile - no need to settle for cropped/bunched up text or strangely large spacing and heading typography.


Integrates with builders

Microthemer has "deep" integration with Elementor, Beaver Builder and Oxygen. You add content with your page builder, then style it with Microthemer - at the same time, using a single browser tab.

And for Divi, Bricks, Brizy, Zion, and WP Page Builder, Microthemer has "shallow" integration. This means CSS and content changes auto-update when using two or more browser tabs.

Note - Microthemer is a standalone WordPress CSS editor, it doesn't rely on any builders to work.

Integration Bcg1x

CSS shapes & masks

Make your designs look more friendly and modern. Distinguish your sites from the standard rectangles, or uniform roundness of border-radius. Think sharp diagonal contours, smooth wavy curves, and organically shaped images. You can create these stylish effects in a few clicks with Microthemer.

Css Shapes And Masks

Safe draft editing

Try out a new WordPress design on your live site without worrying about site visitors seeing your work in progress. Draft mode changes will only be visible to you. Publish your style changes only when you are 100% happy with them. This is great if you're still testing out the various styling options. Draft mode provides a safe environment for applying bold new changes to your site, worry free.


You'll be supported

We understand that you may need help making CSS changes from time to time. This is nothing to feel shy about. We want you to get the best possible results out of Microthemer and have fun using it. So please head over to our friendly and supportive forum if you get stuck with anything. You will receive help from Sebastian - the author of the plugin, and an expert on all things CSS and Microthemer related.


Developers work faster

Microthemer is not just a tool for non-coders. Far from it. Microthemer provides an extremely quick and convenient way to add custom CSS, Sass, and JavaScript code in the browser - the same place you add content using Gutenberg or a page builder.

Your code changes render on screen instantly - no need to switch between desktop applications, wait for Sass to compile (due to a special optimisation), or compulsively refresh the browser. Plus, CSS selectors and media queries are defined in only one place to keep responsive development dry.


Beginner to Pro

If you are new to building WordPress sites, do you always want to feel like a beginner? There is actually a risk of that with development tools that strive to completely shield you from the technicalities of site building. Microthemer is different. Microthemer shows you what it's doing, and invites you to understand CSS, and how it relates to HTML, in your own time. Because that's how you will achieve full design control, for real. That's how you will move from beginner to Pro, which is a very advantageous place to be.


More Features

  • Inspect and edit in one place with computed CSS reporting

    Microthemer reveals your theme's default styling so you can anchor style edits to this. For example, if a heading has a bottom margin of 12px you’ll know that setting this to 24px will double that space.
  • Export your designs between domains and easily backup your work

    You can export your design changes to a 'Design pack' at any time. This is useful for backing up your work, trying out alternative designs and transporting customisations over to another site.
  • Autosave and undo are there to help if you make a mistake

    Microthemer includes a revision restore feature. The past 50-300 actions that alter your workspace are remembered. So, if you make a few mistakes you can easily roll back to a previous point.
  • Clean, optimized code that won't slow your site down

    Surprisingly light-weight for such a powerful plugin. Unlike many other plugins, 95% of Microthemer's code does not run outside of the Microthemer interface so it won't slow down your site.
  • Includes a JavaScript editor with helpful error reporting

    Type some JavaScript code and hit the Control+S keyboard shortcut. Microthemer will reload the site and report any errors in your code so you don't have to fire up the browser console.
  • Deactivate or uninstall before handing over to the client

    If you don't want your clients to make changes with Microthemer, or you just like to minimise clutter, you can uninstall it and still keep the CSS changes you made with it.

Pay in 4 instalments

This is the best of both worlds for many customers.
Secure lifetime updates, but spread the cost over 4 monthly payments of $125.

Mar 4th
Apr 4th
May 4th
  • Developer Lifetime (4 installments)

    $ 125
    Unlimited sites
    Lifetime upgrades
    Famously good support
Secure SSL encryption Pay with PayPal or credit card 30 day no questions money back guarantee Love it, or get your money back.
No questions asked.
Trusted by over 30,000 sites
  • A Game Changer December 3, 2019
    This is an amazing plugin that has changed my development workflow significantly. I used to create a custom functionality plugin with SCSS to override my themes CSS which was a slow process of trial and error. Now, I still create the custom functionality plugin, but I don’t have to create [...]
    Adam Henriksen
  • CSS (and JS) Tuning for Everyone! October 2, 2018
    I love this tool because it allows the experienced developer to quickly, easily and with almost zero impact be able to craft CSS solutions to design problems on top of Page Builders quickly and easily including a kind of IDE for CSS and even throw in some JavaScript for event [...]
  • Superb Styling Plugin July 24, 2017
    Microthemer has enabled me to gain complete control over appearance. After several months of use, I can get the look I want 90% of the time and this percentage is steadily increasing. It’s also a good learning tool. I combine it with GeneratePress and its addons – GP sets up [...]
  • Awesome plugin December 2, 2017
    This is one of the most important/one of the FIRST TO INSTALL plugin for me, when making a new WP install. It is great in many ways : -let’s you see your changes on the go (no need to save/exit/refresh) -creates CSS code – which is a big help, for [...]

Got a question?

Send us a message

We would love to hear from you! We aim to respond in 24hrs Mon-Fri, or 48hrs over the weekend.

Subscription FAQs

What if I only want to pay for one month or one year?

No problem, just go to our cancel page immediately after making your purchase or at any time during your subscription. There you will find an option to cancel future payments. This will disable the auto-renew feature, but your subscription will remain valid until the expiry date shown (e.g. one month/year after your last purchase).

What happens if I cancel my yearly or monthly subscription?

Microthemer will switch to "No updates mode", meaning you will only be able to use the version Microthemer was at when your subscription expired, which you can always get from My Downloads. But you can use this version indefinitely. To get the latest version of Microthemer, simply renew your annual subscription or switch to paying monthly anytime.

Monthly (before 12 payments)
Microthemer will switch to "Free trial mode", which means you will not be able to make style edits beyond the first 15 selectors. However, the selectors and styles you added to any sites when your subscription was active will remain in place. And if you want to make additional edits, you need only reactive your monthly subscription, for a single month if you so choose.

Monthly (after 12 payments)
To reward customers for maintaining an active monthly subscription for 12 consecutive months, Microthemer will switch to "No updates mode" instead of "Free trial mode". So it's just like the yearly plan, where you can use an older version indefinitely.

Will you refund me if I decide Microthemer isn't for me?

Yes of course. We will happily provide a no fuss refund within 30 days of your purchase if you decide Microthemer isn't right for your needs.

With the standard license, are domains transferable?

The standard licenses permit installing Microthemer on 3 sites in total. So it's not possible to transfer site licenses between a rotating set of 3 domains. This is because it's a feature of Microthemer that you can completely uninstall it after making style edits, and still have the changes stick. See MTs Preferences > Inactive tab for more information on that. This is where Microthemer differs from most WP products - you don't need to keep it active on a domain in order to make use of it on that domain. As such, there would be little advantage of the developer license if the standard license allowed for domain transference.

Note: If you install Microthemer on a dev/staging domain, you can ask for it to be removed from your quota once the site is launched on the live domain. Just send us a quick message via our contact form.

What forms of payment do you accept?

We support Stripe and PayPal. Together, these payment gateways support a large number of payments options - from credit / debit card to Google Pay.

Do you provide support for Microthemer?

Yes! We provide documentation and have an actively maintained forum where you can get free support. Please use it as often as you need to.

Microthemer FAQs

Will I lose Microthemer edits if I update my theme?

Your Microthemer styles are completely safe when you update your parent or child theme. That's the beauty of controlling styling via a plugin – plugins are not affected by theme updates. Microthemer restyles your WordPress site in a non-destructive way. It simply creates an alternative stylesheet:


This stylesheet has style rules that the browser applies instead of the styles in your theme because they have higher CSS specificity. Microthemer doesn’t delete or modify any files in your theme. Therefore when you update the theme, nothing is lost.

Can I remove Microthemer and still use the CSS code it generates?

You can deactivate or completely uninstall Microthemer and still make use of the styles it creates by manually including the /wp-content/micro-themes/active-styles.css . To do this:

  1. Access the Microthemer interface
  2. Go to General > Preferences > Inactive.
  3. Copy the code from the textarea to your theme's functions.php file.
  4. This code will do nothing when Microthemer is active. But if Microthemer is inactive, it will add Microthemer CSS/custom JS to your site. It will also add page-id/slug classes to the <body> tag which you might have tapped into when using Microthemer. And any Google fonts you applied with Microthemer.
  5. Because the inactive code also ensures the right Google fonts and classes are included, we recommend this method over copying and pasting Microthemer's CSS code to your theme. But you can do that too if you prefer to use Microthemer as a simple CSS generator.
  6. Rest assured that when you deactivate or uninstall Microthemer, its settings will not be deleted from the database by default. There is an option for that on the Preferences > Inactive tab, but it's off by default. So if you ever want to go back and make further edits, you can just re-install Microthemer.
  7. You may ask "Is there any need to buy the developer license if you can deactivate Microthemer"? Yes, domain licenses are non-transferable precisely because of this deactivation feature. So with the Standard license, you can only install Microthemer on 3 domains in total. Once you've reached this quota, you will need to upgrade to the Developer license in order to install Microthemer on additional domains.

How can I see the code Microthemer generates?

You can view the CSS Microthemer generates at any time from the View > Generated CSS & JS option.

Do I need to know CSS/HTML code to use Microthemer?

No, Microthemer has been developed with an equal mind for non-coders and experienced CSS developers. That said, you will enjoy Microthemer more if you are willing to learn how to read a bit of HTML and CSS code, even if you always let Microthemer generate it for you. Learning how Microthemer makes the style changes to your site will enable you to be more proficient. A little bit of knowledge goes a really long way in that respect. To start with, you can just play around with the UI controls. But that might just give you a taste for more. If so, checkout the videos via the Help menu at the top right of the interface.