CSS Hero Review

CSS Hero is a premium visual CSS editor plugin. It allows you to change any aspect of your website design without writing any CSS or HTML yourself.

It’s useful for customizing the look your theme, plugins, or content on the front end.

Instead of writing CSS code by hand, CSS Hero handles every aspect of the design process, including:

• Selector targeting
• Choosing properties
• Adjusting CSS property values

This is all done through a visual interface, much like a page builder (or Webflow). All you need is a mouse. You can even see the actual CSS code as CSSHero writes it for you.

Overall Verdict: CSS Hero is the best option for beginners (as well as the most affordable). However, Microthemer is a bit more powerful in the hands of a skilled (or aspiring designer).

What is CSS Hero?

CSS Hero is a live CSS editor plugin for WordPress. Unlike traditional text-based CSS editors, you don’t have to write any CSS yourself.

CSS Hero lets you design visually, using just your mouse and/or keyboard.

How CSS Hero works:

1. Select an element on the canvas (targeting mode)
2. Adjust the CSS properties as you like (background, font, border etc)
3. Add animations and hover effects (optional)
4. Change layout and properties for different screen sizes (media queries)

CSS Hero then writes the syntax-perfect CSS for you. You can export the CSS as a complete file if you want, or let CSS-Hero load it automatically on the front-end of your site.

Who should use CSS Hero?

CSS Hero is a good fit if you fall into any of these categories:

• Understand CSS but struggle to remember property names or syntax
• Want to learn CSS and struggle with everything (especially selectors & targeting)
• Are experienced with CSS but want to speed up your workflow
• Can write CSS fluently but prefer to design visually

In other words, CSS Hero (and visual CSS editors in general) is perfect for almost anyone looking to enhance their site design using CSS.

For example, I am quite experienced in CSS and even publish Youtube tutorials using Flexbox and Grid, but still use a visual editor (Microthemer) to speed up my workflow and help manage selectors.

CSSHero Pricing

CSS Hero is well-priced compared to its competitors and currently offers 4 subscription options (one is lifetime).

• 1 site: $29/year
• 5 sites: $49/year
• 999 sites: $199/year
• Lifetime Pro (999 sites): $599/one-time

For most users, the personal 5-site plan is going to be the sweet spot, and it works to under $10/year per site. And of course you don’t have to renew if you don’t want continued updates or support.

The personal plan is substantially cheaper than competitor Microthemer’s 3-site license which is priced at $99/yr.

However once you get into the pro and lifetime licenses, CSS Hero is less of a bargain. Microthemer gives unlimited annual licenses for $199/yr and lifetime unlimited for $499.

CSS Selectors & Targeting Mode

The first step in working with CSS Hero is to choose an element on the canvas that you want to target. In CSS, this is known as choosing a ‘selector’.

In CSS, you can combine one or more CSS Selectors to target specific elements or groups of elements.

CSS Hero makes this easy, even if you’re a CSS Novice.

The plugin includes a visual targeting mode that lets you point and click elements on the front end of your site. You can then step into the built-in ‘inspector’ view, which lets you refine your targeting by viewing the raw HTML.

Selector Auto-Suggest

If the default selector isn’t perfect, there are a few ways to fine-tune it:

1. You can use the Selection Mode dropdown to restrict your styles to a specific page ID or template class
2. You can use the auto-suggest feature to see different selector combinations

You access can view the alternative selectors by right-clicking the element on the canvas, then choose Alternatives and scroll through the list of suggestions.

CSS Hero does a decent job with the auto-suggest feature, but it doesn’t provide nearly as many selector combinations as you’d get with Microthemer.

View Targeted Elements

When editing your selector, you can see all the elements on the page where the selector applies, but only when hovering over the selector rule or clicking on it. This is useful for ensuring your targeting is correct.

I’m glad this feature is here, but I prefer Microthemer’s implementation where all selected elements are highlighted at all times.

Supported CSS Properties

CSS Hero supports more than 150 different CSS Properties, all easily accessible from the side panel next to your canvas.

These properties are organized by category, to make them easier to find.

Categories include:

• Background
• Typography
• Borders
• Border-radius
• Spacings
• Transforms
• Filters
• List-styles
• Display
• Extras: box-shadow, transition
• Measures: dimensions like width, max-width
• Position: absolute, relative, sticky, fixed

Full List: See all supported CSS Properties (CSS Hero)

The categorization is pretty good, but there are some odd choices. For example, I feel like border-radius should be tucked inside borders for simplicity. Also, hiding transition (super common for hover animations) under ‘Extra’ isn’t optimal.

Of course you’ll quickly learn where your commonly used properties are kept, so it shouldn’t be an issue. Which brings me to my favorite feature:

Real-time CSS property search

You can start typing a property name and CSS Hero will automatically load the property settings directly in your property panel. I love this feature and it’s a huge time saver. I could do without the side slide-in animation, however, which looks cheesy after a while.

Flexbox

CSS Hero’s latest version adds a much-needed feature: Flexbox support.

Flexbox is an incredibly handy layout system that makes responsive design and column/row-based layouts much simpler in CSS.

It also handles things like aligning elements inside their containers, without all the workarounds that used to be required.

How to use Flexbox

Flexbox settings are under the display category in the properties panel. Simply set your element to display-flex and all child elements will instantly become flex-items.

You can then access all the usual flexbox parent and item settings as:

• justify-content
• align-items
• flex-wrap
• flex-basis
• flex-grow
• flex-shrink

and so on.

Grid

Unfortunately, CSS Hero doesn’t currently support display: grid or CSS grid.

However, my preferred alternative Microthemer does have an excellent grid implementation with an intuitive visual grid builder.

Additional Design Features

There are several integrations that provide extra functionality for some of the supported CSS selectors.

These include:

• Unsplash integration: automatically pull background images from unplash
• Video Backgrounds: Free video background library via Coverr.co
• Scroll Animations: pre-built animations using an open-source CSS animation library
• Inspector: visually inspect the HTML and CSS code of your website
• CSS Snippets: Use pre-built snippets or roll your own to style frequently used elements (e.g. buttons)
• Palette Generator: Built-in color palette generator saves time and guesswork

CSS Variables

CSS Variables are a fantastic feature of CSS3, and once you start using them you’ll never go back. Variables let you define a property once and store it in a variable that can be re-used across elements, simply by referencing that variable.

Even better, variables have scope inheritance which lets you override variables on specific elements or containers without impacting other elements.

CSS Hero supports variables right out of the box. You can easily define and access variables from any element or property. The UI for this is great, built right into the setting input for each property.

Technically the variables you create in CSS Hero are LESS variables, not CSS variables, but they can work the same. It also will automatically pull in any CSS variables in your site’s stylesheets.

Unsplash

Browse and search the unsplash free image library directly from the CSS Hero interface. You can use these images as backgrounds or overlays and CSS Hero will automatically add it to your Media Library.

Scroll Animations

CSS Hero comes pre-installed with a full library of CSS entrance animations (scroll effects). This effects can be applied to any element (and specific screen sizes) and will trigger when the element enters the viewport.

There are several different animation styles including: slide, zoom, fade and bounce.

You can also customize the delay, duration and repeat for each animation.

CSS Snippets

Do you ever find yourself using the same types of CSS snippets or designs over and over? This happens frequently for me when designing buttons or callout boxes.

CSS Hero includes dozens of premade Snippets which are little blocks of reusable code for buttons and other common elements. You can also define your own snippets or copy them from CSS-inspiration sites like Free Frontend.

This is useful for any group of properties that you often apply to elements together. For example, if you re-use the same border, border-radius, and box-shadow settings across multiple elements or containers.

Simply save those properties as as snippet and re-apply them elsewhere with just a click.

Google Fonts

In addition to web safe fonts, CSS Hero lets you access the complete Google Fonts library right from the Typography section of the properties panel.

Color Palette Generator

Do you struggle to choose coordinating colors when designing? Do you spend precious minutes (or hours) spinning the wheel on color generators like coolors.co?

CSS Hero has a built-in palette generator that will automatically suggest coordinating colors for your current color scheme.

Media Queries & Mobile Design

CSS Hero makes it easy to build responsive, mobile-friendly layouts. You can preview the canvas at several pre-set breakpoints (desktop, tablet, landscape-mobile, mobile) or define your own custom breakpoints.

Built-in Breakpoints

When viewing a specific breakpoint, all new rules in that view will be wrapped in a media query that apply only to that screen size.

There’s also an indicator to show which breakpoints have a rule set for that element, which is quite handy.

Custom Breakpoints

You can also create your own custom breakpoints, using min/max pixel widths. These will then be saved as global media queries for your project.

Mobile Preview QR Code

One of my favorite unique features of CSS hero is the real mobile preview. CSS Hero generates a QR code that you can scan with your smartphone and see a live preview of your canvas on an actual smartphone, rather than just using a simulated view on your monitor.

It’s a great idea and well implemented. One minor caveat is that it only works on live sites, you can’t use this feature for local development sites.

Version History & Rollback

All CSS edits and property changes made in CSS Hero are saved in the version history pane. You can easily undo/redo any edit or browse to previous versions by clicking the History button in the top toolbar.

From there you can view the full history of changes. Clicking on a previous version will revert the canvas to that version (and rollback all later changes).

You can also see the exact style rule changed for each specific version, but unfortunately it requires an extra click. By default the history pane only shows the time and date of the edit.

I much prefer Microthemer’s implementation where the actual property name and value are displayed in the history browser. That said, the rollback feature works flawlessly.

Support & Documentation

Like most plugins, CSSHero uses ticket-based support from your account panel. In my experience, responses have been relatively prompt and helpful.

Documentation

CSS Hero has a large documentation database with a handy search feature to find the help article you’re looking for.

One complaint, however, is that too many articles rely on ‘video’ explanation which often requires 5 – 15 minutes to watch fully. I much prefer written documentation with images to explain basic functionality quickly and effectively.

This may slow down your learning curve a bit at the beginning, as it’s hard to get quick answers on some features.

There are also some features that are entirely undocumented, such as the palette generator.

Updates & Fragmentation

One annoyance of CSS Hero is they’ve chosen to go through multiple versions of the plugin, but make upgrading optional. In other words, you can continue to run v3 of CSS Hero even though v5 has been released. And the migration between these versions isn’t automatic when you install the updated version.

You have to follow an upgrade process.

It works fine and is manageable by even non-techies, but it’s not how software should function in a modern website (unless there’s a really good reason).

Competitors & Alternatives

There are several plugins that offer a similar visual CSS editing experience. The stiffest competition comes from these two:

1. Microthemer: The most full-featured live CSS editor for WordPress
2. Yellow Pencil: Affordable per-site licensing and good UI. Ideal for 1-2 sites.

Microthemer

Microthemer is my favorite visual editor, and I do prefer it to CSS hero — for a few reasons:

1. It supports CSS Grid and has a visual grid editor (which is awesome)
2. The UI is more intuitive
3. Better targeting mode and selector navigation
4. The History panel is more useful because it shows the property changes

The above features speed up my workflow and save frustration, which is worth the extra cost for me.

That said, there are a few things CSS Hero does better than Microthemer:

1. Searchable property panel
2. Better CSS Variable management
3. Mobile preview via QR code
4. More generous licensing & pricing

Yellow Pencil

Yellow pencil is a solid alternative to CSS Hero. The functionality is similar, but you get a detachable property panel in the UI which some people prefer.

Licensing is per-site (through Codecanyon) so it’s more affordable if you have 1 or two sites.

Which to choose

For most people, the I recommend choosing either CSS Hero or Microthemer (especially if you have more than one site).

The better option comes down to a few things:

• How well you understand CSS
• If you want Grid capabilities (Microthemer-only)
• If you want the best targeting mode (Microthemer)
• Whether you want more power (Microthemer) or more cheaper pricing (CSS Hero)

I think it’s pretty clear from this list that Microthemer is a better plugin, but it’s also substantially more expensive, especially if you want a lifetime unlimited license.

So in the end, it comes down to whether you’re willing to pay up to have the best product or save 30-50% and get something that’s solid but not quite as good.

Conclusion

CSS Hero is a solid choice and one of the better visual CSS editors available for WordPress.

It supports nearly every CSS property you could want, including CSS Variables, flexbox and even a library of pre-built animations.

There are a few drawbacks to be aware of:

1. No CSS Grid Support
2. Fragmentation between major versions
3. Targeting mode (choosing a selector) isn’t as polished as competitors

Aside from that, there’s a lot to like: