CSS Formatter and Beautifier
Format messy CSS into readable, indented rules.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Formatter and Beautifier
How to use this tool
- Paste CSS in the box, messy or minified.
- Choose an indent and press Format to see one declaration per line, rules indented.
- Use Load sample for a one-line rule that formats into four lines.
Worked example
The input a{color:red;margin:0} with 2-space indent formats to: a { on the first line, then two spaces plus color: red;, two spaces plus margin: 0;, then }. A nested media rule indents its inner rule one level deeper, so @media text stays readable instead of flat.
What this tool does not do / Limits
This is a formatter, not a CSS validator or fixer: it does not repair missing braces, does not check property names, and does not understand every at-rule perfectly. Strings and comments are kept intact, but badly broken CSS may format oddly rather than being corrected.
Frequently asked questions
Does formatting change what the CSS does?
No. Only whitespace and line breaks change. Selectors, properties and values are left as written.
Are comments kept?
Yes. Block comments are kept on their own lines where they appear.
Related tools
JSON Studio
Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.
LiveRegex Tester
Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.
LiveSecurity Header and DNS Checker
Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).
Live