CSS formatter & minifier
Beautify or minify CSS online: pick the indentation (2/4 spaces, tabs), wrap selectors, sort properties, strip comments and whitespace, and see the size difference plus syntax error lines.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
What this tool does
- Expand a minified third-party stylesheet back into readable lines so you can find where a rule actually lives.
- Minify your own styles before shipping: comments and redundant whitespace go away, trailing semicolons are dropped, and the size change is shown.
- Use "sort properties by name" to normalise declaration order and cut meaningless diffs in code review.
- Paste broken CSS and get the exact line plus the reason — an unclosed block or a declaration missing its colon.
Example
Input
.card,.box{color:red;padding:0 1px}
@media screen and (max-width:600px){.card{margin:0 auto}}Output
.card, .box {
color: red;
padding: 0 1px;
}
@media screen and (max-width:600px) {
.card {
margin: 0 auto;
}
}The same input in Minify mode returns .card,.box{color:red;padding:0 1px}@media screen and (max-width:600px){.card{margin:0 auto}}.
Frequently asked questions
Does it handle nested rules like @media and @supports?
Yes. The parser tracks brace depth, so declarations inside @media and @supports are indented per level and the nesting survives minification unchanged.
Can minification break my CSS?
No, the semantics are preserved: whitespace and semicolons inside strings — including url(...) and content: "a;b" — are kept verbatim. Only comments and structural whitespace are removed, plus the final semicolon of each block.
What do "unclosed block" and "a declaration is missing its colon" mean?
The tool ships its own lightweight tokenizer. An unclosed { or ( raises "unclosed block", and a block fragment without a colon raises "a declaration is missing its colon"; both report the line where that fragment starts.
How is the size percentage calculated?
In UTF-8 bytes, not characters — Chinese text and comments take three bytes each, so stylesheets with CJK comments appear to shrink more. A negative number means the output is larger than the input.
Can it format SCSS or LESS?
Better not. The parser targets standard CSS; SCSS nesting, variables, mixins and // comments are outside its grammar and may be reported as syntax errors. Compile to plain CSS first.
Keywords：csscss formattercss beautifycss minify美化压缩格式化css 压缩style