CSS Hero Pro

CSS Hero Pro lets you select elements on your site and adjust their styles through a visual editor with a live preview. It can be used to change colors, backgrounds, typography, margins, and layout details, giving site owners and web professionals a way to tailor a WordPress theme’s appearance without editing theme files.

The plugin stores customizations in a separate stylesheet, leaving theme and plugin files unchanged. You can preview designs at different screen sizes and make device-specific edits, then export your CSS or LESS for backup or manual use. The editor also includes controls for effects such as gradients and shadows, plus a code editor for users who want to work directly with CSS or LESS.

Features

• Visual style editor: Point to and select site elements, then adjust their styles in the visual editor and view the results live.
• Color and background controls: Use the color picker to try colors and backgrounds. The plugin can remember favorite shades in a personal color palette.
• Typography options: Adjust text styles using Google Fonts and TypeKit support, with WOFF2 font format compatibility.
• Responsive editing: Preview the site at different screen sizes, use standard or custom breakpoints, and make edits for specific devices.
• Separate stylesheet: Save custom styles in an extra stylesheet without changing theme or plugin files, and undo edits when needed.
• CSS and LESS editor: Edit CSS or LESS directly with a live preview, CSSLint validation, and the option to add custom media queries.
• CSS export: Export custom CSS or LESS for backup or manual implementation outside the visual editor.

Best for

• WordPress site owners customizing theme styles
• Developers adjusting CSS and LESS
• Agencies refining client websites