The Best CSS Editor Plugins for WordPress

Sooner or later, you’re going to need to add some CSS code to your WordPress website. Whether it’s just a one-off snippet or some hands-on customization, the right CSS editor plugin can make all the difference.

Below you’ll find the absolute best visual CSS plugins for WordPress, all of which I’ve tested personally. These plugins make it easy to customize your theme, widgets, or Gutenberg blocks even if you don’t know CSS at all.

This list is divided into two distinct categories of plugins:

• Visual CSS Editors – Plugins that let you design visually and can actually choose selectors and write CSS code for you. These are front-end editors that let you preview changes in real-time.
• CSS Live Editors – More basic CSS tools that help you let you live-preview your CSS changes and can help with syntax, but won’t write any code for you.

The Best Visual CSS Editors

These plugins tend to be paid tools (with a few exceptions) but the value proposition is obvious. Visual editors put advanced CSS customization capabilites in the hands of novices. You only need a basic knowledge of how CSS works to use them.

Some of them, like Microthemer, can literally write the code for you. 21st-century robot stuff I know.

Here’s how I’d rank them:

1. Microthemer (free & pro)
2. CSS Hero (pro)
3. Siteorigin CSS Editor
4. Yellow Pencil (free & pro)

Microthemer

Microthemer by Themeover is an intuitive visual CSS editor that lets you easily style and lay out elements on your site.

Also Read: Microthemer Review

Microthemer can write 100% of the CSS code for you if you want, and lets you visually edit more than 100 CSS properties with just your mouse. Advanced users will love the depth of features (including Flexbox & Grid), the measuring tool and thoughtful UI.

Try Microthemer Pro for free: Free interactive demo of Microthemer.

How MicroThemer Works: You visually choose elements or css selectors for targeting using your mouse (or type them in manually). Then you can tweak any supported CSS property in the visual-editing sidebar.

Microthemer lets you customize all of the most common CSS properties for any element or CSS selector on your site. Its most impressive feature is the Flexbox & Grid generator that lets you create complex responsive layouts without touching CSS code.

100+ CSS Properties you can style visually, including:

• Spacing (margin, padding)
• Border
• Font (font-size, font-weight, font-family)
• Shadow
• CSS Transforms (translate, rotate, skew, scale)
• Grid & Flexbox
• Position (absolute, relative, fixed & sticky)
• CSS Variables
• And dozens more

In my opinion, the biggest standout feature is its CSS Grid and Flexbox capabilities, which most competitors don’t even offer. CSSHero doesn’t include grid layout at all.

Microthemer is a Freemium plugin with a limited free version available in the WordPress repository. Microthemer Lite contains nearly all the same styling options as the pro version, with a few notable ommissions. First, it only lets you customize 15 elements per site. Second, it doesn’t include the flexbox or grid features.

I find it remarkable how incredibly powerful Microthemer can be in the hands of a skilled designer, while remaining user-friendly enough for a complete newbie to get the hang of.

Now don’t get me wrong, there’s a learning curve, but once you understand the basics of selector targeting and which properties are found where, you’ll be flying through your designs.

Microthemer isn’t perfect, however. It defaults to using !important to override existing styles, which can have some unintended consequences. I also find the targeting mode a bit tedious and often prefer to choose my own selectors manually.

What makes MicroThemer Unique:

Pricing: MicroThemer Lite is free forever, and the pro version starts at $99/yr for 3 sites. You get unlimited sites for $199, and there’s also a lifetime license available.

CSS Hero

CSS Hero is the most popular (pro) CSS live editor on the market. It boasts incredible power under the hood while remaining extremely beginner-friendly. In my opinion, CSS Hero is the best live CSS editor for beginners and non-coders. It makes writing custom css styles for your site incredibly easy, even fun.

Read: CSSHero Review & walkthrough

Try it yourself: Try the interactive CSSHero Demos where you can style popular WordPress themes from scratch.

This front-end WordPress css editor plugin has the best UI in the category. First you there’s a visual targeting mode where you select the element (or CSS selector) to be styled. Then the editor sidebar pops up where you control the individual CSS properties.

CSS Hero includes all the most-used CSS properties for typography, spacing, positioning, sizing, borders, backgrounds and more. I only wish they’d add flexbox and css grid support (hopefully in v6).

Features

Here are my favorite CSSHero Features:

• Plug-and-play styles (e.g. pre-styled buttons & other components)
• Scroll Animations
• Color palette generator
• Live JavaScript editor
• Version history (restore your design to any previous checkpoint)
• Export generated CSS code
• Unsplash integration (free public domain images)

CSSHero vs. Microthemer

When compared to MicroThemer, CSS Hero is missing only major features.

1. CSS Grid support
2. CSS Flexbox support

That’s most of what separates these two excellent plguins That said, these are the two biggest selling points of MicroThemer, but non-coders might never use display:grid anyway.

But it adds several unique features of it’s own such as scroll animations, csshero-ready themes, and pre-built component styles.

I also prefer CSSHero’s selector targeting which gives you exactly the amount of selector specificity you need to apply your styles without ever resorting to the use of !important (unless you want to use it).

Video Walkthrough

Take a look at exactly how CSSHero’s workflow works.

Pricing: CSS Hero is reasonably priced. It costs just $19/yr for 1 domain, $39/yr for 5, and there’s a 999-site lifetime license for $179.

SiteOrigin CSS

SiteOrigin CSS is a free WordPress plugin and the best free visual CSS editor for WordPress. It’s available in the WordPress repository and has an overall rating of 4.9/5 stars (95% five-star ratings). This plugin allows you to make basic styling tweaks to your WordPress site with zero CSS knowledge.

While it doesn’t have quite as many features as MicroThemer, CSSHero or YellowPencil, it’s still a fantastic option. In fact, if you’re only looking at free plugins, SiteOrigin is definitely the best option. True, t’s not as polished as MicroThemer lite and there are fewer properties available for your custom CSS rules. But the big advantage is there’s no artificial limitation of how many elements you can style on your site.

Siteorigin CSS is compatible with any WordPress theme and lets you easily add custom CSS using more than 40 CSS properties. The visual editor is intuitive with a built-in targeting mode that makes it easy to choose the correct selector.

Supported CSS properties include:

While it doesn’t include animations, transitions, or Flexbox (which you can get from MicroThemer) it does cover most of the basic properties that you’d need most often.

One notable omission is Google Fonts integration, which is reserved as the lone paid upgrade as part of the Site Origin bundle. As a result you’re stuck with your built-in fonts or ones you add through your theme or a third-party plugin.

But overall, if you’re a beginner who struggles with basic selector targeting and CSS syntax, this will do the job nicely. It’ll help you avoid typical css mistakes and making adding custom CSS a breeze.

All generated CSS rules are written directly to a stylesheet (css file) which can be exported at any time (you don’t need to keep the plugin installed permanently).

Yellow Pencil

Yellow Pencil is a freemium visual live editing plugin. The pro version is what most people use at it costs around $39 for a 1-site license. It’s a codecanyon plugin so there are no multi-site or lifetime licenses available.

Yellow Pencil premium is a high-quality plugin, nearly on par with CSS Hero or Microthemer. It has a simple targeting mode and lets you customize more than 40 CSS styles. Yellow pencil will work with any theme, but it doesn’t have theme-specific styles like CSSHero does.

UI

My favorite thing about YellowPencil is the UI. It feels like a polished web app like Figma, or even a professional desktop app. All the components are nicely styled and well-organized.

The visual editing sidebar stays minimized until you open a tool to start designing, which gives you more screen real estate to work with. The CSS properties pane is actually a floating toolbar that you can drag around the screen. It’s not locked into a bulk sidebar. I personally like this design choice but some users may get sick of dragging it every time they choose a new selector.

I also like the popout CSS text panel which can be undocked and moved around the screen. It’s an easy way to get more horizontal space when editing CSS without squishing your canvas.

Features

Yellow Pencil includes the most common CSS properties you’d need. There are even CSS transforms, filters and basic animations.

CSS Properties include:

• Text: font-size, font-weight, font-family
• Background: size, position, color, gradient or image
• Spacing: margin & padding
• Borders: thickness, color, style and border-radius
• Positioning: Static, fixed, relative, absolute, sticky
• Transforms: Translate, Skew, Rotate
• and more

Free Version

The free version of Yellow Pencil is severely limited, and numerous reviews complain that it is basically a downloadable advertisement for the pro version rather than a functional plugin.

Overall it gets 4-stars in the official repository, but nearly 20% of the reviews are 1-star.

The complains mostly center around one thing, limitations. You can’t access common properties like font-family, font color or backgrounds. But the UI itself is very similar between versions

Pricing: The pro version costs $39 for a 1-site license with lifetime updates. This may be worth it if you only have a single site but CSS hero is a better value for multiple sites.

Considerations when choosing a CSS Editor

Migrating between CSS editors can be a pain, especially when switching visual editors. Therefor, it’s important to choose wisely which plugin you install on your site. You might be stuck with it for a while.

Here’s some advice on how to choose the right CSS editor:

• Focus on your needs: Worry about the features you need, rather than the total number of features offered. More CSS properties aren’t always better. What matters is the properties you’ll actually use.
• UI is Important: If choosing a visual CSS editor, try the plugin demo before committing. Is the UI intuitive or confusing. ? Is there lag? How accurate is the selector targeting tool? Make sure the plugin will actually enhance your workflow.
• Consider dealbreakers: Are there any must-have features, such as CSS Grid and Flexbox support (MicroThemer Pro only). Make sure you identify those in advance and choose accordingly.

Visual Editors vs. CSS Live Editors

Visual CSS editors are a new breed of plugin that lets you generate CSS code with your mouse. You don’t even need to understand basic CSS syntax or properties. They offer a front-end UI that lets you design visually while the software does all the coding for you.

Advantages of Visual CSS Editors

There are several clear advantages of using visual editors instead of text-based CSS editors.

Advantages:

And there are hardly any disadvantages to speak of (other than the cost). Even if you’re concerned about page speed from ‘yet another plugin’, there shouldn’t be any impact. These plugins don’t load any resources on the front-end other than your stylesheet. Plus, you can export the stylesheet and deactivate the plugin whenever you want.

The value is obvious: you can edit your theme styles, plugin output (or anything on your site) without knowing CSS syntax.

Text-based live editors

Live editors, on the other hand, are much simpler. They’re text-based CSS plugins that let you view your CSS rules in real-time on the front-end, rather than reloading the page every time you want to see your changes.

There are several solid live CSS editors available free in the plugin repository:

Free Live Editor Plugins:

• Simple CSS
• Simple Custom CSS
• Add Custom CSS
• Custom CSS Pro

And don’t forget, WordPress has its own front-end CSS editor available in the WordPress customizer under customizer > Additional CSS.

Just like the plugins above, you can live preview your changes as you make them.

Using the built-in WordPress CSS editor is good enough for most users, though it’s missing some features you’ll find in 3rd-party plugins.

Disadvantages of the Customizer additional CSS:

• No syntax highlighting
• No code completion
• CSS code doesn’t automatically transfer between themes (but you can copy & paste)
• Can’t adjust the editor with