Loading page
About this tool
Format, beautify, and clean minified or messy CSS code with options to adjust tab indentation size and copy output.
CSS Beautifier re-indents minified or messy stylesheets by normalising the spacing around braces, semicolons, colons and commas, then re-indenting each nesting level with 2, 4 or 8 spaces. It is for anyone who has a stylesheet collapsed onto one line — from a build output, a CMS field, or a copied snippet — and needs it readable again. Blank lines between top-level rules can be switched on or off, and the result copies to the clipboard or downloads as styles.beautified.css.
Open CSS Beautifier on AltFTool — it loads instantly in your browser.
Paste your minified or messy CSS into the Input CSS Code box, or press Load Sample CSS to drop in a deliberately messy example that includes a media query.
As soon as the box has content a Formatting Configuration panel appears: choose 2 Spaces, 4 Spaces or 8 Spaces for Indentation Size, and use the Selector Spacing button to switch between 'Add blank lines between rules' and 'Keep rules compact'.
Press Beautify CSS Code to fill the Beautified CSS Code panel, then use Copy Code for the clipboard or Download (.css) to save it as styles.beautified.css — Clear Input empties both boxes and starts over.
2, 4 or 8 spaces applied per nesting level, so nested rules inside a media query line up at the depth your project already uses.
A single toggle switches between a blank line after every top-level rule and a compact layout with no gaps, which matters when the file is long.
A deliberately messy sample with a media query loads in one click, so you can see exactly how the formatter treats nesting before pasting your own file.
Paste it in and beautify — the formatter puts each declaration on its own line, moves opening braces onto the selector line, and indents block contents by your chosen width. It handles nested blocks such as media queries by tracking brace depth, so inner rules are indented one level deeper.
2, 4 or 8 spaces. The tool indents with spaces rather than tab characters, so the output looks identical in every editor regardless of the reader's tab width setting.
Yes. Block comments in `/* ... */` form are kept and pushed onto their own line, so section headings written as comments survive the reformat instead of being stripped like a minifier would.
Yes — the formatted output downloads as `styles.beautified.css` with the text/css MIME type, or copies to the clipboard in one click. The file is generated in the browser, so nothing is uploaded.