CSS Formatter & Beautifier
Beautify minified or messy CSS into readable, properly indented output.
How this tool works
Paste minified or messy CSS
A compressed production stylesheet or just inconsistently formatted rules.
js-beautify reformats it
The same beautification engine used across many code editors restructures the rules.
Set the indent width
Switch between 2- and 4-space output depending on your project’s style guide.
Copy the readable output
One property per line, consistent brace placement, ready to read or debug.
Quick facts
- Category
- Formatters & Beautifiers
- Best for
- Un-minifying a production stylesheet to debug a style
About this tool
Paste minified or inconsistently formatted CSS and get it beautified with one property per line, consistent brace placement, and adjustable indentation - powered by js-beautify’s battle-tested css_beautify, the same beautification engine used across countless code editors and online formatters, rather than a hand-rolled formatter. This is the inverse of the CSS Minifier: where that tool strips whitespace for production, this one restores readable structure for review, debugging, or learning what a compressed stylesheet actually contains. Selectors, media queries, nested at-rules, and vendor-prefixed properties are all preserved exactly, only the whitespace and layout change. Everything runs client-side, so stylesheets never leave your browser.
Why use this tool
Powered by css_beautify
Uses js-beautify’s dedicated CSS engine rather than a formatter written from scratch for this site.
Turns a compressed file back into a readable one
Take a stylesheet straight from a live site’s network tab and get it back into a scannable structure.
One property per line
Makes it possible to actually scan a rule block instead of reading one long compressed line.
Reversible with the CSS Minifier
Shrink a stylesheet for production, then bring it back here later if you need to read it again.
Frequently asked questions
Yes - that’s exactly the use case this tool is built for. Paste in a minified CSS file and it restores line breaks, indentation, and one-property-per-line formatting so you can actually read what a compressed stylesheet contains, which is useful when debugging a live site’s styles or reviewing a third-party library’s CSS.
No - only whitespace and layout change. Selectors, property names, values, and the cascade order are all preserved exactly as written, so the visual output of your stylesheet is identical before and after formatting; the only difference is how easy it is for a human to read.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools