CSS Beautifier

What the brace walk changes

Beautify trims the paste, rejects an empty result, then deletes every /* */ block comment, non-greedy, before it walks. An unclosed comment is left in place because the pattern never finds the closer. The walk keeps a buffer and a depth. A { flushes the buffer with a space before the brace, then increases depth. A } flushes whatever is still buffered, decreases depth, and writes the closing brace at the new depth. A ; runs the declaration through a spacing pass first: space around the colon becomes a single space after the colon, other whitespace runs become one space, and the semicolon is kept.

The spacing pass does not run for text that reaches a } without a semicolon. That is why color:#111 in the sample is still color:#111 on its own line, with no semicolon added, while padding:1rem becomes padding: 1rem; because that declaration had a semicolon. If you add the missing semicolon, color: #111; is what Beautify writes. Newlines in the source become spaces in the buffer, so a declaration that was already wrapped is joined before it is split again on semicolons and braces. The indent string is two U+0020 characters, or four when that option is selected. Depth never goes below zero.

Beautify, Minify, and the indent menu

Beautify and Minify are a two-button group. Beautify starts pressed. Indent size appears only then, as a select whose options are 2 spaces and 4 spaces. 2 spaces is the initial value. Choosing 4 spaces does nothing until Beautify CSS is pressed. In Minify the select is not rendered, and the indent value is ignored because Minify does not read it.

Minify also strips block comments, then collapses whitespace, removes space around braces, semicolons, and colons, and turns ;} into }. The sample, after a Beautify, minifies back to the one-line sample. A rule whose last declaration had a semicolon loses that semicolon in Minify because of the ;} replacement, so .a { color: red; } with a leading comment becomes .a{color:red}. The status on success is CSS beautified. or CSS minified. Copy output copies the pane. Download output saves css-beautifier.txt. Load sample only fills the box.

When a reindented sheet is the right view

Use Beautify when a rule you copied from a built file is one long line and you want each declaration on its own line. Use Minify when you want that line back, with comments gone. This walk is not a stylesheet engine. It does not reorder properties, expand shorthand, or convert a color. A hex value you want as rgb() belongs on the color converter. A set of related hex colors belongs on the color palette generator.

HTML indent, including a tab choice this page does not have, is the HTML beautifier. Paste a style element there and you are indenting markup, not walking CSS braces. Markdown that should become tags first is Markdown to HTML. Bring the CSS here only after you have a stylesheet, not a Markdown fence.

Comments, missing semicolons, and quoted semicolons

Both modes delete block comments before any other rewrite. A comment between properties disappears, and the declarations on either side are still processed. A comment that never closes stays in the buffer and can glue itself to a nearby declaration. There is no line-comment syntax here. Two slashes are ordinary characters.

The walker does not understand strings. A semicolon inside quotes is still the semicolon that ends a declaration, so content:"a;b" is split into two lines and the quote is broken. A brace inside a string would change depth the same way. @media and other at-rules that use braces nest, because each { increases depth and each } decreases it. An @import that ends with a semicolon is flushed as its own line on Beautify. Empty input, or input that is only spaces, throws before the walk. Beautify says Paste CSS to format. Minify says Paste CSS to minify. The pane is cleared. The page does not fetch a URL and does not validate against a CSS grammar.

Rules and limitations

Beautify indents with 2 spaces by default or 4 spaces when that option is selected. Semicolon-terminated declarations gain a space after the colon. A declaration closed only by } is flushed raw, with no semicolon added. Block comments are removed in both modes.

Minify collapses the sheet to one line and turns ;} into }. Quoted semicolons are not protected. Empty input errors and clears the pane. Download output saves css-beautifier.txt. The indent menu does not rerun.

Common problems

If the last property lost its space and its semicolon, the source had no semicolon before the brace. Add one and run Beautify again if you want color: #111; rather than color:#111.

If a quoted semicolon broke a declaration in half, the walk treated that semicolon as syntax. Take the string out, or fix the line after the run. A missing comment closer can also attach the rest of the comment to the next declaration.

Frequently asked questions

About this tool

Maintained by Toolbench. For large or deeply nested files, split the input into smaller batches and verify representative results before using them in an import or application. Report reproducible problems through Contact.