CSS Formatter

A CSS formatter takes minified or haphazardly-indented CSS and returns a consistent, predictably-formatted stylesheet with one rule per line, one selector per line for compound selectors, and blank lines between rule blocks. It's the right first step when inheriting a codebase whose styles were copy-pasted together over years, or when you've pulled a production stylesheet out of DevTools and need to read it.

Why format CSS when browsers don't care about whitespace? Readability and diffing. A pretty-printed stylesheet is scannable — you can see the rule structure at a glance. A minified stylesheet reads like a wall of noise. Diffing two versions of a formatted stylesheet shows which rules changed; diffing two versions of a minified one shows nothing useful because the entire line changes when one value does.

This formatter is powered by js-beautify, which handles CSS along with HTML and JavaScript. It correctly indents nested selectors, groups selectors on comma-separated rules onto separate lines (which makes diffs cleaner), and adds a blank line between rule blocks for visual separation. The result looks like hand-written CSS by a careful developer.

Limitations. A formatter reshapes whitespace but does not reorder rules, deduplicate selectors, or check for syntactic validity. It produces clean output from valid CSS input; syntax errors in the source pass through silently. For linting and property-order enforcement, pair with stylelint.

Privacy: CSS is formatted entirely in your browser. Useful for proprietary design-system stylesheets, NDA-bound theme files, and production stylesheets that contain embedded tenant IDs or CMS tokens.

1. Paste minified CSS into the input panel.
2. Pick an indent size (2 or 4).
3. Copy or download the beautified output.

• Consistent indentation (2 or 4 spaces).
• One selector per line for compound rules.
• Blank line between rule blocks for scannability.
• Preserves comments and at-rules correctly.
• Runs in your browser — CSS never uploads.