← All tools/Minifiers/Code/CSS Formatter
CSS Formatter
Messy CSS in, readable indented CSS out, in your browser.
Paste CSS here. It is formatted as you type, in your browser.
Formatted CSS
How it works
Formatted = each rule on its own lines, one declaration per line, indented by one level inside each { } block, comments kept on their own lines
Worked example: body{margin:0;padding:0} becomes a body block with margin: 0; and padding: 0; each on its own indented line, and h1{color:#673de6;font-size:32px} becomes a second block the same way. The meaning does not change — only the layout does.
Frequently asked questions
Is my CSS sent anywhere?
No. Everything runs in your browser. Nothing is uploaded, stored or logged.
Will formatting change how my CSS works?
No, for ordinary CSS. Formatting only changes whitespace and line breaks, which CSS ignores. Strings in quotes are copied untouched, so values with spaces survive.
What about messy CSS with missing semicolons?
The formatter adds line breaks after each semicolon and brace it finds. It does not repair broken CSS — if a brace is missing, the indentation after it will look wrong, which is a useful sign that something is missing.
More tools
Tell us what you think
Loving this tool, or stuck on something? Tell us — it takes a minute.
We’ll only use your name and email to reply if needed. The tool and page are filled in for you.