Easily Customize WordPress Themes, live. Main Header

CSS Hero 3 is the definitive WordPress plugin to easily customize the look of your site, with an easy and intuitive point and click interface.

🔥🔥 CSS Hero 3.4 is out! — Lots of great news, read more here.
40px
font-family: Proxima-Nova, sans; font-size: 40px; text-decoration: none; margin-bottom: @spacing;

Control every aspect of your WordPress sites

CSS Hero allows visual customization of any element of your site, all from your frontend. Live.

Customize Responsively

CSS Hero allows you to easily edit, preview and control how your site displays on desktop and handheld devices. Use standard breakpoints or your custom ones.

Device Mode Preview

Test tablet\mobile edits before pushing them online, crafting a responsive theme has never been so easy.

Device Specific Edits

Customize the way your theme appears on handheld devices, commit device-specific edits and preview them in a click.

No fear or breaking things

Fear of breaking your site's responsiveness with your editing? A life-saver "desktop only" feature allows you to limit some of your specific edits to desktop devices only, with one click.

CSS Hero
Main Header My Adventures
Climbing the North Face

Over the last few years I’ve looked at the Pale di San Martino mountains with different eyes, scrutinizing not only the rock climbs, those with climbing shoes and chalk, the weave their way up slabs, arêtes, overhangs and pockets. Ice climbs are all the rage in the Dolomites, not only in the Western Alps, new drips have been climbed in the Brenta Dolomites recently… so surely there’s something in the Pale massif?

CSS Hero
Main Header My Adventures
Climbing the North Face

Over the last few years I’ve looked at the Pale di San Martino mountains with different eyes, scrutinizing not only the rock climbs, those with climbing shoes and chalk, the weave their way up slabs, arêtes, overhangs and pockets. Ice climbs are all the rage in the Dolomites, not only in the Western Alps, new drips have been climbed in the Brenta Dolomites recently… so surely there’s something in the Pale massif?

Gather full control over your site's appearance

Simply mouseover and click the element you want to edit and adjust it to fit your needs, live!

Font Styles and Typography

Add a touch of class with your own fonts, a huge collection of Google Fonts is at your fingertips. TypeKit fonts are supported as well.

Color Management

Use a color picker to experiment live color and background changes like never before. Hero also stores your latest used colors, and helps building a consistent color palette.

Adjust Measures

Easily tune element margins and paddings: just drag a slider and view what happens.

UnSplash Integration

Ever wanted a nearly unlimited source of high quality, royalty-free, amazing pictures right at your fingertips? We've got you covered.

Complex CSS Made simple

Spice up your site elements: building gradients, box-shadows, text-shadows and all the modern CSS properties is now a point and click affair.

Readymade Snippets

Pre-made editable style combinations ready to boost your creativity with one click!

Undo / Redo History

We all design by experimentation. Ouch! Need to undo? Don't panic. CSS Hero automatically stores all your edits in a detailed history list, going back and forward in history steps is as easy as clicking the undo\redo buttons.

No vendor lock-in

Export your work as CSS, LESS, JSON data: you can export your site personalizations instantly and download it to file, for backup purpose as well.

CSS Code Editor

Review, refine and edit the generated CSS code while being able to quickly debug your work if needed.

New!

Style As Unlogged

Style your website while having a real glance of how it will look like for your unlogged users.

New!

Style Login Page

Styling WordPress log-in page has always been painful, forget about it, you can now style it in a breeze with CSS Hero.

New!

Save CheckPoints

Store snapshots of your edits without having to push them live, store different versions, choose the one you prefer and go live.

Safe and non-destructive editing

CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files. It is widely compatible with many environments and it is built to be light and tolerant.

No performance degradation

From a technical standpoint, CSS Hero only generates and enables a single, static extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet.

CSS Hero does not physically alter theme/plugin files in any way. Shut down the plugin and your site's looks will revert to what they were before installing this tool. It's 100% safe.

  • /themes
    • /my-theme
      • ...
      • footer.php
      • frontpage.php
      • functions.php
      • header.php
      • index.php
      • No script is edited here
      • ...
  • /uploads
    • ...
    • csshero-style.css
    • The only file that we add!
    • ...

Unsplash Integration

Finding great images has never been so easy. Thanks to Unsplash you can enjoy an [almost] unlimited source of amazing, royalty-free, high quality images to use in your projects.

Search by keyword, choose an image and a size, and instantly apply as a background image of any site element.

Add Background Load Unsplash images on the fly

You're 100% in control with Inspector

Get extra control on your customisations with a full fledged CSS / LESSCSS editor with live rendering.
Add your extra rules, copy\paste and easily export your work with one click.

Included since CSS Hero 3
CSS Hero Inspector
CSS Hero Animator
CSS Hero Animator

Hello 👋 Animations

Easily apply on-scroll animations to any element on your pages. Choose among a wide set of animations and easings.

Included since CSS Hero 3.4

Trusted by the Leaders

"If you’ve ever been one of those folks that worries that you don’t know enough CSS to make a site look like you want it to, you can stop stressing right about now"

Chris Lema — WordPress Guru

23.000+ Customers can’t be wrong

Don’t just take our word for it, see what our fantastic customers are saying about CSS Hero

Pricing Options

Each plan comes with 1 year of free updates and a 30 days money back guarantee
When that year is up you can renew your license or keep using the last version forever.

Coupon Code
  • Starter Just 1 Site
    29$19/ year
    34% OFF
  • One time users, choose this plan if you're willing to use CSS Hero to customise just one website.

  • Includes:
  • One Year Upgrades
  • Install on one site
  • One Year Basic Support
  • Signup and buy
  • Personal 5 Sites
    59$35/ year
    41% OFF
  • Small agencies, entrepreneurs and advanced publishers handling 2-5 sites (as WordPress installations).

  • Includes:
  • One Year Upgrades
  • Install on up to 5 sites
  • One Year Basic Support
  • Signup and buy
  • Pro 999 Sites
    199$79/ year
    60% OFF
  • Web agencies and professional publishers who manage a larger number of sites.

  • Includes:
  • One Year Upgrades
  • Install on up to 999 sites
  • One Year Basic Support
  • Signup and buy
  • Lifetime Pro 999 Sites
    599$249one time
    58% OFF
  • A full, no hassle, lifetime access to CSS Hero, in a single, one-time payment.

  • Includes:
  • Product Upgrades
  • Install on up to 999 sites
  • Priority Product Support
  • Signup and buy
Secure Payments with Paypal

Frequently Asked Questions

What can I exactly do with CSS Hero?

CSS is the language that enables internet websites look different; CSS Hero is a convenient WYSIWYG Theme editor for WordPress that will help you making visual changes to your website with a point and click interface, instead of coding; CSS Hero will automatically generate the required CSS code, and deploy it to your website upon saving.

A clean visual interface will let you leverage advanced CSS features like backgradius fades in a snap, and is full of small helper tools which will make your life easier removing the need to remember values, copying and pasting color codes. You will find almost all CSS properties in CSS Hero, with preset properties, color pickers, shadow generators you can instantly try everything pushing further your CSS knowledge boundaries.

If you are a newbie or a CSS pro, you will love what you will be able to do with CSS Hero.

You can easily Learn CSS while playing CSS Hero.

Enter the CSS revolution. You will not go back!

Will CSS Hero work on my Theme?

Yes, most probably. It works with most themes and plugins whithout issues.

You can buy with confidence as, in case CSS Hero won't properly work in your environment, we offer a full 30 days money back guarantee.

What if I make a mistake? Do I risk messing up my site? Is CSS Hero solid?

A full history is maintained of all your edits - thus you can preview and recall instantly all the versions of your Hero-generated CSS.

You can always undo with CSS Hero - and you can even reset single properties, so that if you made a wonderful job of personalizing your site, but you have messed the site header for example, you can always reset that element only - so that your personalizations are erased and the element will revert to the original Theme definition.

Basically, you should never be in trouble.

The data is stored securely on your site.

NO VENDOR LOCK-IN - YOU CAN EXPORT YOUR CODE!

If you want to disable the plugin and export your work, a one-click instant CSS export feature is at your hand.

Will it mess up my Theme? How does it work code-wise?

CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files.

It is widely compatible with many environments and it is built to be light and tolerant

CSS Hero only generates and enables an extra CSS stylesheet that cleanly overrides your Theme's original stylesheet.

How much do I pay to renew my CSS Hero plan in case I previously bought a discounted one?

The discount coupon or deal you got at first buy doesn't account for further renewal or upgrading actions. The renewal is not automatic, CSS Hero will never charge you any amount if you do not dispose it directly. You'll just receive an offer to renew your account one month before expiring date. We have distinct deals for upgrading and renewing your plan, so take a look at our newsletter. We work to make our heroes happy!

Will CSS Hero Be Addictive?

Yes, definitely. Once you discover how much fun you will have with this tool, you will become a Hero-junkie too.

For some it's the WYSIWYG live CSS customization, for other folks the effective color management, or the ability to instantly test background image uploads. We want you to be hooked on Hero!

What does it mean "activate for one year on new sites, edit forever your sites"?

Each plan expires after 365 days from the purchase date. At the end of that period CSS Hero will continue working, but you will not be able to install CSS Hero on NEW (other) sites. At the end of your CSS Hero annual plan, your plan will NOT automatically renew.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.

Affiliate

Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero