CSS Hero - Visual CSS Editor

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

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.

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.

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

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.

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

Demo Link : https://www.csshero.org/

Summary from Demo
CSS Hero is the definitive WordPress plugin to easily customize the look of your site with an easy and intuitive point and click interface.
Simply mouseover and click the element you want to edit and adjust it to fit your needs live!
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.
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.
Easily tune element margins and paddings: just drag a slider and view what happens.
Spice up your site elements: building gradients box-shadows text-shadows and all the modern CSS properties is now a point and click affair.
Spice up your site elements: building gradients box-shadows text-shadows and all the modern CSS properties is now a point and click affair.Spice up your site elements: building gradients box-shadows text-shadows and all the modern CSS properties is now a point and click affair.Spice up your site elements: building gradients box-shadows text-shadows and all the modern CSS properties is now a point and click affair.
Style your website while having a real glance of how it will look like for your unlogged users.
Styling WordPress log-in page has always been painful forget about it you can now style it in a breeze with CSS Hero.
Pre-made editable style combinations ready to boost your creativity with one click!
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.
My name is Kathy Jennings i'm a photographer based in Portland Oregon.
Test tablet\mobile edits before pushing them online crafting a responsive theme has never been so easy..
Customize the way your theme appears on handheld devices commit device-specific edits and preview them in a click.
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.
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.
Store snapshots of your edits without having to push them live store different versions choose the one you prefer and go live.
We all design by experimentation. Ouch! Need to undo? Dont 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.
We believe it’s one of the plugins every WordPress beginner should try
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
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.
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.
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 works on any WordPress theme and plugin and helps you to visually customize all site elements from header to footer.
Get extra control on your customisations with a full fledged CSS and LESSCSS editor with live rendering. Add your extra rules copy and paste and easily export your work with one click.
Inspect refine and edit the CSS Hero generated CSS code
Get a live preview of your CSS edits on your website
Your code is automatically checked by the smart CSSLint engine
Point and click selection for editable elements
Apply edits to all devices or limited to a media query
Extend your CSS Hero code to new media queries
Keep track of edits or simply add a note to your code
Save - and enjoy the results - or export tidy CSS code
Easily apply on-scroll animations to any element on your pages. Choose among a wide set of animations and easings.
Empowered by the AOS library plugin which offers many cool animation effects fade flip slide zoom
Don’t just take our word for it see what our fantastic customers are saying about CSS Hero
Each new purchase comes with a 30 days money back guarantee. An active membership will grant you access to plugin updates private support and new product activations. Choose an annual plan or get a lifetime subscription.
One time users choose this plan if you're willing to use CSS Hero to customise just one website.
Small agencies entrepreneurs and advanced publishers handling 2-5 sites (as WordPress installations).
Web agencies and professional publishers who manage a larger number of sites.
A full no hassle lifetime access to CSS Hero in a single one-time payment.
Each new purchase is granted 100% money back within 30 days from purchase date.
CSS Hero has been tested on most WordPress themes and plugins (like DIVI Elementor Beaver Builder Genesis framework...) and it will be basically compatible with any WordPress environment. Have a look at our plugins and themes demo pages.
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.
CSS is the language that allows websites to 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 background fades in a snap and is rich of small helper tools which will make your life easier removing the need to remember values color codes keywords. You will find almost all CSS properties in CSS Hero with preset values 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 CSS Hero does - plus you can easily learn or improve your knowledge of the CSS language (and LESS actually) while playing with it.
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 that element will revert to the original Theme definition.
Basically you should never be in trouble.
From a technical standpoint CSS Hero does only add to your site frontend a single static extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet. Period.
There is NO significant performance degradation and zero added workload for your server.
Yes definitely. Performance-wise this is not worth the effort as CSS Hero is an extremely lightweight plugin - but of course you can do so if you want. You can always export the generated CSS code and save it wherever you desire: there is no vendor lock-in at CSS Hero.
You can paste the exported CSS code in the WordPress Customizer Additional CSS field and shut down the CSS Hero plugin: your personalization work will be kept.
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.
Your edits are stored securely on your database - but your users will be served a static CSS file only.
No problem at all! Renewal is required only for updates and support. Your CSS changes will continue to work perfectly and the product will still launch. 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!
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.
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!
From our Blog: How to add a video background using CSS Hero
Have any pre-sale questions?Please dont hesitate to Contact Us.
Registered Members need something?Get started from your Dashboard.
CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.