CSS Formatter
Beautify stylesheets with clean 2-space indentation or minify them to one line for faster page loads.
Turn compressed or messy CSS into readable rules with one declaration per line, or shrink a stylesheet to a single line by stripping comments and collapsing whitespace. The parser is string- and comment-aware, so braces inside quoted content values are not mistaken for rule blocks, and unbalanced braces produce a clear error instead of broken output.
How to use this calculator
- Paste your CSS into the input box.
- Choose Beautify for readable indented rules, or Minify for a single-line stylesheet.
- Click Format.
- If you see an unbalanced-braces error, add the missing closing brace and try again.
- Copy the result — beautified into your source files, minified into production.
The formula
The stylesheet is scanned character by character while tracking quoted strings, comments, and parenthesis depth; each { opens an indented block and each ; or } ends a declaration line, with property/value pairs normalized to 'property: value' spacing.
Worked example
Beautifying .card{color:red;margin:0 auto}.card h2{font-size:1.5rem} produces two rule blocks with each declaration on its own indented line and a space after every colon. Minifying the same input returns .card{color:red;margin:0 auto}.card h2{font-size:1.5rem} on one line.
Frequently Asked Questions
How much smaller does minified CSS get?
It depends on how the source was written, but hand-written CSS typically shrinks 20–40% once comments, indentation, and redundant whitespace are removed. For production sites, serve the minified output and keep the beautified version in your source files.
Does it handle @media queries and nested rules?
Yes. At-rules like @media are treated as blocks and their inner rules are indented one extra level, so responsive styles stay readable. Each nesting level adds two spaces, matching the rest of the output.
What happens with unbalanced braces?
Instead of silently emitting broken CSS, the beautifier reports how many opening braces lack a match. That usually means a rule was left open — the count tells you how many closers to look for. Unclosed comments are reported the same way.
Are values like content: "{" handled correctly?
Yes for beautifying: quoted strings are tracked, so braces, semicolons, and colons inside quotes do not confuse the parser. One caveat — the minifier's whitespace collapsing is regex-based, so exotic values like data URIs with special characters should be spot-checked after minifying.
Does formatting run locally?
Yes, everything happens in your browser. Stylesheets with proprietary design tokens or unreleased class names never leave the page.