The most advanced WordPress Themes editing tool

Get full control of your WordPress look and feel with CSS Hero superpowers, boost your theme customization options!

Easy Point and Click Interface

Simply mouse hover and click the element you want to edit and adjust it to fit your needs.

Developers Add Hero powers to your themes, no extra-coding on your themes is needed and allows full control on which properties\elements you want to be editable. Learn More.

Live Device-Mode Edits

Adjust and customize the way your theme displays on handheld devices in a breeze, add device-specific customizations live.

Developers Building a device-friendly layout has never been easier, prototyping responsive edits is now a matter of seconds. Learn More.

Element
Element
Element
Element

Use 600+ Fonts

Add your own touch of class and personality to your WordPress Themes by choosing from a wide list of popular web-fonts and glyphs.

Developers Combine the power of Google Fonts to your theme native font sets, Typekit and your third party font libraries. Learn More.

Supports: and all third party font managers.

Complex CSS Made simple

Building gradients, box-shadows, text-shadows and all the modern CSS properties is now a point and click affair.

Developers Enhance your theme customization options with advanced CSS features that your users can easily understand and customize. Learn More.

Intelligent Color Picking

Adding your personal touch to your themes is now as easy as pointing and clicking a color, Hero also stores your latest used colors.

Developers Hero allows cross-app color picking to instantly pick colors from other apps (Photoshop, Fireworks, images or whatever is on your desktop). Learn More.

CSS Hero Inspector

Inspector brings the CSS editing experience to a whole new level, it features a clean and smart interface to help you making CSS adjustments to your WordPress Themes and Plugins on the fly. Learn More.

Edits History

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.

Developers Keep track of your edits for further testings, save as presets or simply preview history steps for a\b tests. Learn More.

.site-header{
	background: rgba(0,0,0,.3);
	box-shadow: 0x 0px 2px #eee;
	color: #ff3300;
	text-shadow: 0px 1px 1px white;
	line-height: 1.2;
}	
	
.site-header h1{
	font-size: 2rem;
	font-family: Helvetica, sans;
	letter-spacing: .3rem;
	line-height: 3;
}

.site-header .logo{
	background-attachment: scroll;
	background-position: center;
	border-radius: 4px;
	margin: 3vh auto;
}
Export: Normal Minified

No Lock-In

Need to move to another platform? Don't want to renew your Hero account? No worries, all the hero generated CSS can be exported in one click

Developers Hero will outputs crystal clear (and minified) CSS ready for you to export it on any other platform\source. Learn More.

A very light footprint

CSS Hero was built from the grounds up to be a "light footprint" plugin, basically it does use resources only while launching the live css editor.

It will not slow down your WordPress admin or clutter it with lots of option panels. It uses little memory while it does a really useful job. CSS Hero can export the generated CSS code, but there's no real reason to do so - especially if you use the static CSS caching feature.

Ready Made Styles

ReadyMade Styles

Pre-made editable style combinations ready to boost your creativity with one click! ReadyMade Styles include: Buttons, Backgrounds, Forms, Full Font Stacks and much more.

Get CSS Hero now and start visually customizing your WordPress Themes and Plugins without coding.

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