CSS Minifier

Paste a stylesheet, press Minify CSS, and get back the same rules with the whitespace and comments removed. The panel reports the original size, the minified size and the percentage saved, all measured as UTF-8 bytes rather than characters.

Why whitespace removal needs a scanner

Deleting spaces from CSS sounds like a job for three find-and-replace passes. It is not, because CSS has four contexts in which a space or a comma means something, and a text-level pass cannot tell them apart. The minifier here walks the stylesheet character by character and tracks which context it is in: inside a quoted string, inside a comment, inside an unquoted url(), or at some depth of parentheses.

Here is what the previous, simpler version did to a perfectly ordinary rule:

.card::after { content: "hello, world"; }     ->  content:"hello,world"
.badge::before { content: "/* x */"; }        ->  the declaration vanished
a[title="a, b"]:hover { opacity: .8; }        ->  selector no longer matched

The first lost a space that was rendered on the page. The second saw a comment where there was a string. The third rewrote an attribute selector's value, which means the rule silently stopped applying to the element it was written for. None of the three produced an error; they produced a stylesheet that was wrong.

What the current pass changes

• Comments are removed, except /*! ... */, the conventional marker for a licence header that has to survive minification.
• Runs of whitespace collapse to a single space, and that space is dropped entirely where it cannot matter — around {, }, ;, :, , and the combinators.
• Descendant combinators keep their space, because .a .b and .a.b are different selectors. The child, adjacent-sibling and general-sibling combinators lose theirs, so .card > .title becomes .card>.title.
• The final ; before a closing brace goes, as do repeated semicolons.

Inside parentheses the rules tighten: spaces are removed around commas and after an opening paren, but the spacing inside calc() is left alone. calc(100% - 2rem) is not the same expression as calc(100%-2rem) — the CSS specification requires whitespace around the + and - operators there, and stripping it produces a declaration the browser drops.

Quoted string contents pass through untouched, escapes included. An unquoted url() payload is emitted verbatim, which is what keeps a long base64 data URI intact.

What it will not do

No property reordering, no merging of adjacent rules with identical selectors, no shorthand collapsing, no removal of declarations later rules override. It also does not shorten colours: #223344 stays as written rather than becoming #234. Vendor prefixes are left exactly as you typed them, neither added nor removed on any assumption about your browser targets.

Those omissions are the honest kind. Structural CSS optimisation needs a full parser with a cascade model, which is what cssnano and Lightning CSS are for, in a build pipeline where the output gets tested. This page is for the common case: a stylesheet you want smaller before it goes somewhere, with nothing rearranged behind your back.

What kind of saving to expect

A hand-written, well-commented stylesheet typically drops 15-30%. One that came out of a preprocessor and is already tightly written may only drop a few per cent. Either way, gzip or Brotli on the server will do far more for transfer size than minification does, and the two compose — minify first, compress second.

If the markup that consumes these rules also needs tidying, HTML Formatter reindents it from the parsed DOM. For converting a colour between hex, RGB and HSL notations before you paste it in, use Color Converter.

Your stylesheet is processed in the page you are reading; nothing is posted to a server, and the editor contents live in sessionStorage for this tab alone.