CSS Formatter — unminify and beautify CSS
Turn minified CSS back into readable rules.
One click turns a single-line, compressed stylesheet back into CSS you can read: every selector on its own line, properties indented beneath it. A CSS beautifier for the moment you must debug styles you didn’t write.
How to use CSS Formatter
Drop the stylesheet — or just the suspicious chunk of it — into the input field and format it. The output keeps every rule and every value untouched; only the layout changes. From there the usual moves become possible again: searching for a selector, scanning a rule’s properties top to bottom, and spotting the duplicate declaration that has been silently overriding your change all afternoon. Everything happens in the browser tab itself; the stylesheet is not sent anywhere, stored anywhere, or seen by anyone but you.
When a CSS beautifier saves the day
Production stylesheets are compressed for speed, and rightly so — but the day always comes when someone has to read one. The typical emergencies: A live site misbehaves and the only stylesheet you can reach is the deployed, one-line version.
You inherit a project whose build pipeline is gone, leaving compressed output as the only source. Two rules fight over the same element, and you need to see their order and specificity laid out plainly.
A diff between two stylesheet versions is meaningless until both are expanded the same way. In each case the fix starts the same way: expand first, read second. Reading compressed rules by scrolling sideways is how mistakes get made twice.
Nobody has ever found a bug by squinting harder at one endless line. Indentation is not cosmetic — it is where comprehension lives.
Beyond stylesheets: markup too
Styles rarely arrive alone, so the page pairs the CSS tools with an HTML formatter: paste collapsed markup and get back an indented tree where nesting is visible and stray tags stand out. That combination covers the common rescue scenario — a page saved or scraped as one dense block, where you need to match selectors in the stylesheet against elements in the markup. Running both through an online HTML formatter and the style expander side by side turns an archaeology job back into ordinary reading.
Finding the rule that is winning
Formatting gets you a readable file; the browser's inspector tells you which line actually applied. Use both together. Inspect the element, see the winning declaration and the ones struck through, then search the formatted stylesheet for that selector to understand why it exists. Guessing from the formatted file alone leads to the classic mistake of adding !important to a rule that was never the problem.
Questions and answers
- Does expanding the CSS change how the page renders?
- No. Whitespace is meaningless to the browser’s CSS engine — the formatted file styles the page exactly as the compressed one did.
- Can I compress the stylesheet again afterwards?
- Yes. Formatting is freely reversible in that direction: minify the expanded file for production whenever you finish reading and editing it.
- Why did comments disappear from my stylesheet?
- The formatter keeps whatever is in the input. If comments are missing, the minifier that produced the file stripped them earlier — they cannot be recovered from the compressed version.