CSS Formatter
Indent a stylesheet so you can read it, entirely in your browser. Nothing is renamed, shortened or normalised.
Runs entirely in your browser. Nothing is uploaded, logged or stored.
Paste a minified or badly indented stylesheet and read it properly. The formatting happens in your browser, and nothing about the sheet is changed beyond its whitespace.
How it works
The sheet is split into pieces — comments, strings, addresses, names, numbers, brackets — and then written back out. Each rule gets its own block, each selector of a list its own line, and each declaration its own line inside the rule. Nested rules, media queries and keyframes nest with it.
Whitespace is kept unless it provably means nothing. That is the opposite of what most formatters do, and it is deliberate: in CSS a space between two selectors is the descendant combinator, so ".a .b" and ".a.b" match different elements. Space is only removed before a comma, semicolon or closing bracket, and after an opening one, where CSS cannot read it as anything.
The one space that is added is the one after a declaration's colon. Telling that colon from the colon of a pseudo-class is why the formatter looks ahead to the next bracket or semicolon before deciding what it is reading.
Examples
| Case | Input | Result |
|---|---|---|
| A rule written on one line | a{color:red;margin:0} | a { color: red; margin: 0; } |
Frequently asked questions
Is my stylesheet sent anywhere?
No. The formatter is JavaScript running in this page. Nothing is uploaded, nothing is logged and nothing is stored — you can turn off your network connection and the tool still works.
Does it minify as well?
No, and that is a decision rather than an omission. Minifying CSS means deciding which whitespace carries meaning and which does not, and getting that wrong changes which elements a rule matches — silently, in a way you would find out about in production. That is a different job, and it deserves to be done properly or not at all.
Will it fix or tidy my values?
No. It will not lowercase a hex colour, shorten #ffffff, drop a leading zero, reorder your declarations or add vendor prefixes. Every one of those is an opinion about your code rather than a question of layout, and some of them change behaviour. Only the whitespace moves.
Does it understand Sass or Less?
Partly, and honestly: it lays out nested rules, which is the part those languages share with modern CSS. It has no idea what a mixin, a variable or a control directive means, so it treats them as the tokens they are. Nothing is lost, but do not expect it to know that @if opens a branch.
What happens to a data URI?
It survives. An unquoted url() is read as a single piece up to its closing bracket, because a data URI routinely contains a semicolon and reading that as the end of a declaration would cut the value in half.
Good to know
- The output holds exactly the pieces the input held. The only addition is a semicolon on a block's last declaration, which is safe everywhere and keeps the result stable when the rule later grows another line.
- An unterminated string, comment or url() is refused rather than reformatted, because from there the tool can no longer tell code from text.
- The layout is deterministic: the same sheet and the same option always produce the same output, and formatting an already formatted sheet changes nothing.