CSS Beautifier

Any time you need to understand structure rather than single values. Debugging specificity issues, reviewing a third-party stylesheet before including it, diffing two versions of a file, and learning how a site achieved an effect all become far easier with one declaration per line and consistent indentation. Browser DevTools can pretty-print too, but a beautifier gives you a persistent, copyable file and lets you re-minify after editing.

Walks the CSS character-by-character, tracking 5 token types: text (selectors, properties, values), open ({), close (}), semi (;), comment (/* … */). Strings ("…" / '…') and parens ((…)) are kept inside their enclosing text token – so content: "}"; doesn’t accidentally close a rule, and calc(100% - 20px) doesn’t get split on the inner -.

Yes – the depth counter increments on every { and decrements on every }, regardless of whether the block is a top-level rule, an at-rule, or a nested rule. So @media (min-width: 768px) { .a { color: red; } } formats with .a indented one level deeper than @media.

The tool handles SCSS/Less syntax that’s structurally similar to CSS (nesting, comments, etc.) – but doesn’t understand $variables, @mixin, @function, or other preprocessor-specific syntax beyond passing them through. For full SCSS/Less support, use Prettier or the official preprocessor formatters.

Reverse operation: strips whitespace, comments, and trailing semicolons before }. The output is functionally identical to the input but smaller (typically 20-40% reduction depending on original formatting). Not as aggressive as cssnano (which also merges duplicate rules, shortens colors, etc.) – for production minification, use a build tool.

Default: .a, .b, .c { color: red; } stays on one line. With this toggle: each selector goes on its own line:
.a,
.b,
.c {
color: red;
}
Useful for code review (diffs are cleaner when each selector is its own line).

The tokenizer ignores depth-tracking on output – it always closes blocks on }, even if there are more } than {. The output may have extra closing braces or be nested deeper than expected. Run it through CSS Lint to catch original issues.

Yes – the tool only changes whitespace and indentation. Property order, selector order, and rule order are preserved exactly. If you want alphabetical property sorting, use Stylelint or Prettier.

1 MB. Larger files work in principle but the tokenizer is O(n) per character, and updating a 1 MB textarea live is slow on lower-end devices.

No. The CSS is processed entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.