webutilkit

CSS Formatter

Reformat minified or messy CSS with consistent indentation, in your browser.

Formatted

How it works

The stylesheet is scanned character by character, tracking nesting depth through every { and }. Each declaration and selector is re-printed on its own line with two spaces of indentation per level, which also handles nested at-rules like @media correctly.

What gets removed

Comments (/* ... */) are stripped, and repeated whitespace inside a declaration is collapsed to a single space. Property values, selectors, and the cascade itself are left completely untouched.

Common uses

Making a minified stylesheet from a build tool readable for debugging, or cleaning up CSS copied from a source that stripped all the formatting.

Frequently asked questions

Does this validate my CSS?

No. It re-indents braces and declarations without checking property names or values, so it will format invalid CSS the same way it formats valid CSS.

Are comments preserved?

No, comments are stripped during formatting. This keeps the formatter simple, at the cost of losing any explanatory comments in the source.