CSS Beautifier

What this tool does

CSS Beautifier reformats minified or inconsistently indented CSS into clean, readable, consistently indented code with an adjustable indent size, using the js-beautify library entirely in your browser.

Minified or inconsistently formatted CSS, from a build tool’s output, or someone else’s code with different formatting conventions, is hard to read or debug until it’s reformatted with consistent indentation.

This tool reformats it using js-beautify, the same formatting engine used across many code editors, with an adjustable indent size, entirely inside your browser.

How to use CSS Beautifier

1. Paste your minified or messy CSS.
2. Adjust the indent size if you prefer something other than 2 spaces.
3. Copy or download the formatted output.
4. Re-run it any time you paste in a different snippet.

Tips for better results

• Beautifying doesn’t change what the CSS actually does, only its formatting (whitespace, line breaks, indentation), the rendered result is identical before and after.
• A consistent indent size (2 or 4 spaces are both common conventions) makes nested rules and media queries much easier to scan visually.
• This is the reverse operation of the CSS Minifier tool, useful for turning a production build’s minified output back into something readable for debugging.
• If the input CSS has syntax errors, the beautifier may still attempt to format it but the output could look unexpected, fix syntax issues in the source first for the cleanest result.

Common use cases

• Making a minified production CSS file readable again for debugging.
• Reformatting someone else’s inconsistently indented CSS to match your own style.
• Cleaning up CSS before reviewing or editing it.
• Converting a compact one-line CSS snippet into properly indented multi-line code.

Common mistakes to avoid

• Expecting beautifying to change the CSS’s actual behaviour; it only reformats whitespace and indentation, the computed styles are identical before and after.
• Beautifying CSS that still has syntax errors and expecting a clean result; fix any actual syntax problems in the source first, since a formatter doesn’t validate or repair invalid CSS.
• Using a different indent size inconsistently across a project; pick one convention (2 or 4 spaces) and apply it consistently for the most readable result across your whole codebase.