CSS Formatter
Expand minified or messy CSS into readable rules: one declaration per line, nested blocks indented, comments and strings preserved.
a,
b {
color: red;
background: blue;
}
@media (min-width:40em) {
a {
color: blue;
}
}
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Paste minified or badly formatted CSS and get it back readable: one declaration per line, nested blocks indented, comments and strings untouched.
How to use
- Paste the CSS. Minified output, a snippet copied out of devtools, or a file someone else left behind all work.
- Pick the indent that matches the codebase. Two spaces is the common default; tabs if the rest of the project uses them.
- Leave one selector per line on for long selector lists. It makes a diff show which selector changed rather than the whole line.
- Copy the result back into your editor.
- Format the file you edit, not the build output. Formatting a minified file makes it readable, not maintainable: the original names and comments are gone for good.
Example
a,b{color:red;background:blue}@media (min-width:40em){a{color:blue}}becomes
a,
b {
color: red;
background: blue;
}
@media (min-width:40em) {
a {
color: blue;
}
}The colon inside (min-width:40em) is left alone, because it is part of a media query rather than a declaration.
Pitfalls
- Formatting does not recover what minifying removed. Comments, variable names and the original structure are gone; you get readable CSS, not the source.
- A brace or a semicolon inside a
contentstring does not end a rule. A formatter built on regular expressions gets this wrong; this one scans properly. - CSS with a syntax error formats into something that looks fine and still does not work. Check it in the browser, not by eye.
- Reformatting a whole file in a shared repository makes one enormous diff. Do it in its own commit.
- Custom properties can hold almost anything, including a semicolon in a string. Their values are preserved as written.
- An unterminated comment or string is reported rather than guessed at, because guessing produces a file that silently drops rules.
- A minified file that concatenated several stylesheets stays concatenated. Formatting makes the seams visible but does not split them.
- Long values, such as a
grid-template-areasblock or a data URI, stay on one line. Breaking them is not always safe.
Compatibility
The output is ordinary CSS and works anywhere the input did: nothing is rewritten, reordered or shortened. Nesting, custom properties, layers and container queries are all handled as blocks, so modern syntax is indented the same way. The tool runs entirely in your browser and handles stylesheets up to 100,000 characters.