CSS Formatter / Minifier
Beautify CSS with consistent indentation and one-declaration-per-line, or minify it by stripping comments and whitespace. Handles media queries and nested braces.
How it works
The tool first strips comments (respecting strings), then tokenizes by brace depth: at-rules (@media), selectors and declarations are re-emitted with chosen indentation; minify mode collapses runs of whitespace, removes final semicolons and shortens nothing else (no dangerous rewrites like #fff→#fff optimizations or vendor-prefix removal). Brace balance is checked — mismatched braces are reported with the depth found.
How to use CSS Formatter / Minifier
Paste your stylesheet and switch between Format and Minify. Formatting re-indents with two spaces and keeps comments, custom properties and calc() intact; minifying strips comments and whitespace while preserving strings, url() values and data URIs byte-for-byte.
Check the reported size difference after each run — typical hand-written styles shrink 20 to 40 percent. Keep the formatted version as your editing source and ship the minified one, and the tool makes that round trip safe on every save.
Frequently asked questions
Will minifying break my CSS?
No. The minifier only removes comments and unneeded whitespace while preserving strings, url() values and data URIs. Media queries, variables and nested selectors stay intact.
Does the tool support custom properties and calc?
Yes. --variables, var() functions, calc() expressions and comments are kept when formatting. Comments are stripped only in minify mode, which is what browsers expect.
How much smaller will my stylesheet get?
Typical hand-written stylesheets shrink 20 to 40 percent, mostly from whitespace and comments. Exact before and after sizes are reported after every run.
Can I copy the output straight into my build?
Yes. Formatted output uses 2-space indentation for review, while minified output is a single optimized line ready to paste or inline into HTML.