CSS Formatter & Minifier
Formatting and minifying CSS are the same transformation run in opposite directions, so they belong on one page. Paste a stylesheet and you get both: a readable version for working with, and a compressed version for shipping.
How to use it
- Paste CSS into the input.
- Both the beautified and minified forms are produced at once.
- Copy whichever you need. Nothing is transmitted.
What the beautifier does
Each rule is placed on its own line, declarations are indented two spaces inside their block, and one declaration appears per line. Nested at-rules such as media queries are indented with their contents.
The parser tracks string boundaries, so quoted content is left untouched. This matters more than it sounds: a content property containing a brace or a semicolon would otherwise be read as structure and destroy the rest of the file. URLs containing semicolons, and generated content strings, are the usual cases.
What minification removes
Minification is a set of safe textual removals rather than a rewrite.
Specifically:
- Comment blocks, in their entirety.
- Whitespace around braces, colons, semicolons, and commas, which is not significant in CSS syntax.
- The final semicolon before a closing brace, which is optional.
- Runs of whitespace collapsed to a single space where a separator is still required.
How this interacts with gzip, and why the raw saving is misleading
CSS is text and compresses extremely well in transit. Gzip typically reduces a stylesheet to a fifth of its size, and Brotli does slightly better.
That changes the arithmetic on minification. Much of what minification removes is whitespace, which is exactly the kind of highly repetitive content that compression algorithms handle almost for free. A stylesheet that minifies from 100 KB to 70 KB may only go from 18 KB to 15 KB once gzipped.
Minification is still worth doing, for two reasons that are not about transfer size: the browser has less text to parse, and the saving is real on a cache miss. But if your server is not compressing CSS at all, enabling that will produce a far larger improvement than minifying ever will.
What a purpose-built build tool does that this does not
This is a textual transformation. It does not build a syntax tree, so the optimisations that require understanding CSS semantics are out of scope.
A tool such as cssnano or Lightning CSS will additionally shorten colour values, collapse shorthand properties, merge duplicate selectors, reorder declarations where order does not matter, and remove rules that later rules override. Those can add another 10 to 20 percent.
Neither this nor those tools can remove unused CSS, which is usually the biggest win available. That requires knowing which selectors your pages actually match, which is what PurgeCSS and the equivalent built into Tailwind do at build time. On a site using a large framework, unused rules are frequently the majority of the file.
One caution: minified CSS is hard to debug. Generate a source map in your build, or keep the unminified file available, so that browser dev tools can still point at the line you wrote.
At a glance
| Beautified output | Two-space indent, one declaration per line |
|---|---|
| Minified output | Comments and non-significant whitespace removed |
| String safety | Quoted content is preserved verbatim |
| Not performed | Value shortening, rule merging, dead-code removal |
Frequently asked questions
Is minifying worth it if I already gzip?
Less than the raw byte count suggests, because compression handles whitespace cheaply. It still reduces parse time and helps on a cache miss. If you are not compressing at all, enabling that matters far more.
Can minification break my stylesheet?
It should not. Only comments and non-significant whitespace are removed, and quoted strings are preserved verbatim so that content values and URLs survive intact.
Does it remove unused CSS?
No. That requires knowing which selectors your pages match, which is a build-time analysis. PurgeCSS and the Tailwind build do this, and on framework-heavy sites it is usually the largest saving available.
Why is my minified file only slightly smaller?
Your CSS was probably already compact, or most of its size is in selectors and values rather than formatting. Minification removes formatting, and there is a floor.
Read more
Formatting and encoding — Pretty-printing catches bugs, Base64 costs 33 percent, and escaping applied in the wrong context prevents nothing.