CSS Hero Inspector

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

Available in Personal and Pro Plans.

The perfect CSS Editor for WordPress

Whether you're a CSS guru or a newbie willing to get familiar with CSS the Inspector is the perfect tool for you to provide CSS customizations to your Wordpress Themes and Plugins.

My Fantastic Website
Yes Relayer
Gates Of Delirium

Stand and fight we do consider Reminded of an inner pact between us That's seen as we go And ride there In motion To fields in debts of honour defending Stand the marchers soaring talons Peaceful lives will not deliver freedom Fighting we know, Destroy oppression The point to reaction As leaders look to you attacking

Yes Close To The Edge
Close To The Edge

A seasoned witch could call you from the depths of your disgrace, And rearrange your liver to the solid mental grace, And achieve it all with music that came quickly from afar, Then taste the fruit of man recorded losing all against the hour. And assessing points to nowhere, leading ev'ry single one. A dewdrop can exalt us like the music of the sun, And take away the plain in which we move, And choose the course you're running.

  • Desktop
  • iPad Landscape
  • iPad Portrait
  • iPhone Landscape
  • iPhone Portrait
  • Add Media Query
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@media screen and (max-width:768px){ #site header { padding: 50px 0; } #site article { text-align: center; } }
#site header .title { margin: 10px 0; font-size: 24px; }
#site header { padding: 30px 0; }
#site article > p { color: #828B94; font-size:11px; margin-bottom:20px; }
Select Export
Syntax Check

A pack of useful features

Features you would expect from a desktop code editor available on your WordPress front-end.

Review Your Code

Inspect, refine and edit the CSS Hero generated CSS code

Add extra custom CSS live

Get a live preview of your CSS edits on your website

Avoid typical CSS mistakes

Your code is automatically checked by the smart CSSLint engine

Easy element selection

Point and click selection for editable elements

Refine Device Specific CSS

Apply edits to all devices or limited to a media query

Add your own Media Queries

Extend your CSS Hero code to new media queries

Comment your code

Keep track of edits or simply add a note to your code

Save \ Export

Save - and enjoy the results - or export tidy CSS code

Built on a solid ground

Codemirror + CSSLint

Code Rendering Inspector Pro relies on CodeMirror to render CSS code, CodeMirror is the most powerful and solid JS plugin to render code, used widely across the web from CodePen to JSFiddle.

Syntax Check Inspector Pro uses CSSLint to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.

/

Try CSS Hero Inspector and discover a new way to easily apply CSS edits to your WordPress Themes with a simple and powerful interface

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