Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Indent minified CSS into readable, one-declaration-per-line rules.
body {
color: red;
margin: 0;
}
.btn {
padding: 10px;
border-radius: 4px;
}This tool indents minified CSS -- turning a single dense line into a readable structure with one declaration per line inside each rule block, matching typical hand-written CSS formatting conventions.
Paste minified CSS. The formatted, readable version appears instantly.
The formatter tokenizes on {, }, and ; characters, indenting one level deeper inside each rule block and placing each declaration on its own line.
body{color:red;margin:0;} becomes:
body {
color:red;
margin:0;
}
For HTML specifically, see the HTML Beautifier.
The beautifier first collapses every run of whitespace, including newlines, into a single space. It then scans character by character. An opening brace prints the selector accumulated so far followed by a space and the brace, then increases the depth. A semicolon ends a declaration, which is printed on its own line at the current depth. A closing brace prints any final declaration that had no trailing semicolon (adding one), lowers the depth and prints the brace. Nothing about the values themselves is altered: colors, units, quotes and vendor prefixes pass through untouched, only the whitespace around them is rebuilt.
Indent = 2 spaces x depth. "{" opens a level, "}" closes one, ";" ends a line.
Consider a minified rule such as a media query for a maximum width of 600 pixels that wraps a rule for the class nav setting display to none. Because the tool tracks depth by braces, the media query line is printed at depth 0, the nav selector at depth 1 with its declaration at depth 2, and the closing braces step back out one level at a time. This nested structure is exactly what you want when reviewing responsive styles, and it works the same way for keyframes and supports blocks, since it only cares about braces and semicolons.
Use it when you receive a minified stylesheet from a production site, a plugin, or a build output and need to read or diff it. Beautify both versions before comparing them so a line-based diff shows real property changes instead of one enormous line. After editing, remember that the tool does not minify: run your normal build step or a minifier before shipping. It also performs no validation, so an unknown property or a typo in a value is preserved exactly as typed.
No -- it's a formatter, not a validator; invalid CSS is reformatted the same way as valid CSS, without flagging errors.
No -- whitespace and line breaks in CSS are not meaningful to the browser's rendering, only the declarations and their order matter.
It handles plain CSS's brace/semicolon structure; preprocessor-specific syntax (variables, mixins, nesting) isn't specially recognized, though basic brace structure still formats reasonably.
The tool ends a line at every semicolon, and a data URI contains one before the base64 marker. The text is unchanged, only the line break is added, but rejoin those lines if you copy the code back into a stylesheet.
No. Declarations stay in the original order and every value, unit and color format is left exactly as written. Only whitespace and line breaks change.
Yes, because indentation follows the braces. Each nested block is indented one further level. The tool does not understand what the blocks mean, though, only their structure.
The beautifier always writes a semicolon at the end of the final declaration in a block. It is valid and makes later edits less error-prone.
Reference: MDN Web Docs