Loading page
About this tool
Beautify, validate, minify, compare, copy, and download CSS in real time inside the browser.
The CSS Beautification and Formatting Tool re-indents CSS with a real tokenizer that understands strings, comments and block at-rules, and at the same time returns a minified version and a validation report. It is for developers cleaning up inherited or minified stylesheets who want the formatted output, the byte savings, and a list of syntax problems in one pass. Indent width, bracket placement, line spacing and alphabetical property sorting are all switchable, and the validator flags missing braces, missing semicolons and duplicate properties.
Open CSS Beautification and Formatting Tool on AltFTool — it loads instantly in your browser.
Paste your stylesheet into the CSS Input Editor panel ('Paste or write CSS here...'). There is no format button — the Beautified Output panel beside it rewrites as you type, and the Find box reports how many matches your search term has in the input.
Shape the output with the controls above: Indent (2 spaces, 4 spaces or Tabs), Line spacing (Compact or Spacious), Brackets (Same line or New line) and the Sort properties checkbox, which alphabetises the declarations inside each rule.
Press Beautify Mode to flip to Minify Mode — the right panel becomes Minified Output — then use Copy, or the CSS button to download styles.formatted.css (styles.min.css while minifying). The Validation, Statistics and History panels underneath list the syntax messages, Input chars, Output chars, Input lines, Output lines, File size and Minify diff %, and your last six inputs.
Alongside the indented output you get errors for missing braces or absent declarations, warnings for missing semicolons, and hints for duplicate properties inside a block.
Indent of 2 spaces, 4 spaces or tabs; compact or spacious line gaps; brace on the same line or the next; and optional alphabetical sorting of properties within each block.
The same parse produces both, so you can copy the readable version for the repo and the stripped version for production without running the input twice.
Yes — every format run also produces a minified string with comments removed, whitespace collapsed and the final semicolon before each closing brace dropped. The statistics panel shows the saving as a percentage of the original character count.
No. The formatter keeps a list of at-rules that open blocks — media, supports, container, document, layer, scope and keyframes — and indents their contents as nested blocks rather than mistaking the colon in a condition for a declaration.
Four things: unbalanced braces, declarations missing a semicolon before the next token, blocks or files with no declarations at all, and the same property declared twice inside one block. If none of those fire it reports that the syntax looks valid.
It is wrapped into a safe CSS block comment and you get a warning saying plain text was detected. Any `*/` sequence in the text is escaped so the resulting comment cannot terminate early and break the stylesheet around it.