Free CSS Beautifier
This free CSS beautifier turns minified or untidy stylesheets into readable code with one declaration per line, a space after each colon and indented rules. Nested blocks such as media queries are indented one more level. Comments, strings and url() values are kept exactly as written. It suits developers who need to read or edit a stylesheet they received minified.
CSS Beautifier
Generators and Converters
About this tool
Minified CSS is written for browsers, not people: every rule sits on one line and finding a single colour or margin means scanning thousands of characters. Beautifying restores the layout that makes a stylesheet easy to review.
The tool reads the stylesheet one character at a time, so semicolons inside url() data addresses and braces inside strings do not confuse it. Each selector starts a new block, each declaration gets its own line with a single space after the colon, and rules inside media or supports blocks are indented one level deeper. Comments stay where they were. You can choose two spaces, four spaces or tabs.
Formatting does not change what the CSS does, and it does not fix errors: a missing brace shows up as indentation that never returns. Pair it with the CSS minifier when you want to compress the file again before publishing. Nothing you paste is stored.
Frequently asked questions
Does beautifying change how my CSS works?
No. Only whitespace between rules and declarations changes, so the browser reads exactly the same instructions. Strings, comments and url() values are copied unchanged, which also protects inline data images.
Can it format SCSS or LESS?
Plain CSS is the target. Simple nested SCSS and LESS blocks will usually indent sensibly because braces are handled the same way, but features such as mixins with unusual syntax are not understood, so check the result before you rely on it.
Why does a closing brace not return to the left?
The formatter follows your braces exactly. If a rule is missing a closing brace the indentation stays deep to the end of the file. That is a quick way to find the broken rule, but you need to add the missing brace yourself.
How do I make it small again?
Keep the beautified version while you work, then run it through the CSS minifier before you publish. The minifier removes the comments and whitespace again, so you get readable source for editing and a compact file for visitors.