Hello CSS Hero 3

Get your hands on the most advanced WordPress CSS Editor around. Currently in Public Beta, available now for all current members

EDITING MODES:
  • WYSIWYG - Same as in CSS Hero 2, fully WYSIWYG
  • Split View - Both the WYSIWYG and Code Editor are visible
  • Full Code - Showing just the Code Editor
CSS Hero 3

Redesigned Interface

The whole interface has been redesigned to be friendlier and much more powerful. Watch the video and have a sneek peek!

Gather full control over your site's appearance

From color hinting to how to export your edits, find out how CSS Hero 3 will speed up and empower your theme editing tasks.

Undo / Redo History

We all design by experimentation. Instantly undo your edits while maintaining a full edits history.

Export / Import CSS, LESS, JSON data

No vendor lock-in: you can export your work instantly and download it to file, for backup purpose as well.

Generated Code Overview

Stay in control of the generated CSS code while being able to quickly debug your work.

Improved Responsive Experience

Use standard breakpoints for your edits or create new ones with an easy point and click interface with live preview.

Add Media Query:
  • New Media Query   320px
  • Tablet Portrait   768px
  • Tablet Landscape   1024px
320px
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?

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 3
Variables
  • @myColor #3498db
  • @accents #ff3300
  • @secondColor purple
  • @fontSize 2vh
  • @paddingUnit @fontSize/2

Variables

Store your custom edits values and re-use them wherever you need'em with a quick selection feature or by coding them live.

  • Chromatic Variables

    Manage your color schemes from one single point, easily build harmonic and consistent color schemes with the new palette generator.

  • Variable Operations

    Use variables to apply design rules to your customisations, store font-sizes, automatically generate proper line-heights and spacings.

Snippets

Re-usable sets of edits to store and apply similar styles across multiple elements.

.card( @backColor:#fff , @txtColor:#353b50 )
  • background-color: @backColor;
  • color: @txtColor;
  • border-radius: 5px;
  • box-shadow: 0 0 10px rgba(0,0,0,.2);

Unsplash Integration

CSS Hero and Unsplash teamed up to provide you an (almost) unlimited source of royalty-free image to use in your projects.

Add Background Load Unsplash images on the fly

More Fonts

Quickly add Google or Typekit fonts to your projects, build font collections and apply custom fonts with ease.

Current Status: Public Beta

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