CSS Properties Panels


CSS Hero gives to you the possibility to change common CSS Properties like font sizes, colors, margin, border…previewing instantly the end result.

These CSS Properties are grouped into nine main sections.
Sections are very intuitive and their name reflects the properties you will find inside.

This is the look  of the Full CSS Properties Panel:

Main Features in the Panel

1. Color Picking

An useful color picker allows selection your desired colors for texts, backgrounds, shadows…
If you desire, you are free to type with your keyboard the desired CSS color ( i.e. #ccccc) in the input field. After you’ve entered the color code, press the TAB key to see the effect.

Supported CSS Color Formats:

  • Hex Code #RRGGBB – (default) – Example: #2984c3
  • RGB ColorsExample: rgb(255,255,0)
  • HSLExample: hsl(120,100%,50%)

By default, CSS Hero Color Picker uses the Hex Code format in color picker (all colors will be converted to this format)

Please note:

  • Hexadecimal color values are supported in all major browsers.
  • RGB color values are supported in all major browsers.
  • HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

2. Cassius’ Auto-Learning Color Palette

We must spend some words to show you this handy feature for color selection. When you choose a color for some element’s property, Cassius stores your selection and shows it again in your next color selection process.

So you’ll find step by step all the colors you’ve chosen during the customization of your site and your Color Schemes will be more coherent.

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


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