CSS Beautifier
Pretty-print minified or messy CSS with proper indentation.
What is CSS Beautifier?
CSS Beautifier takes minified, compressed, or inconsistently-formatted CSS and reformats it with clean, consistent indentation — one selector block per section, one declaration per line, nested at-rules (like media queries) indented one level deeper for every level of nesting. It's built with a small state machine that tracks comments and quoted string values, so a `{` or `;` that appears inside a comment or inside a quoted string (like `content: "a { b"`) is never mistaken for real CSS structure and left exactly as you wrote it. This makes it safe to run on CSS you've pulled from a minified production bundle when you need to actually read what a rule is doing, or before pasting a snippet into documentation or a code review.
How to Use CSS Beautifier
- Paste your CSS — minified or otherwise messy — into the input box.
- The formatted version appears instantly below, with consistent 2-space indentation per nesting level.
- Copy the formatted result with the copy button.
Examples
A minified rule
Input: .a{color:red;background:#fff;}
Output: .a { color:red; background:#fff; }
A nested media query
Input: @media (max-width: 600px){.a{color:red;}}
Output: @media (max-width: 600px) { .a { color: red; } }
Common Mistakes
- Running this on genuinely invalid CSS and expecting it to be fixed — a formatter reformats structure, it doesn't repair broken syntax.
- Expecting property values themselves to be reformatted (e.g. color shorthand expanded) — this tool only handles indentation and line breaks, not value normalization.
- Pasting CSS with mismatched braces and being confused by the error — check for a missing `}` at the end of a rule, or an extra one copied in by mistake.
- Assuming beautified output means production-ready — you'll usually want to minify again before shipping; see the CSS Minifier tool.
Why Use This Tool
- Processes entirely client-side — your CSS never leaves your browser.
- Comments and string literal contents are protected from being mistaken for structural syntax.
- Correctly indents nested at-rules like media queries.
- Instant, live formatting with no submit button.