CSS Minifier

Paste a stylesheet, press Minify CSS, and you 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 in UTF-8 bytes (not characters).

Why whitespace removal needs a scanner

You'd think three find-and-replace passes would be enough to strip the spaces out of CSS. The trouble is that CSS has four contexts in which a space or a comma means something, and a text-level pass can't tell them apart. This minifier walks the stylesheet character by character and keeps track of which context it's in: inside a quoted string, inside a comment, inside an unquoted url(), or at some depth of parentheses.

Here's what the previous, simpler version did to some perfectly ordinary rules:

.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, so the rule silently stopped applying to the element it was written for. None of the three raised an error. Each one just produced a stylesheet that was wrong.

What the current pass changes

• Comments are removed, except /*! ... */, the usual 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 can't 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, and so do repeated semicolons.

Inside parentheses the rules get stricter. Spaces are removed around commas and after an opening paren, but the spacing inside calc() is left alone, because calc(100% - 2rem) and calc(100%-2rem) aren't the same expression. The CSS specification requires whitespace around the + and - operators there, and if you strip it the browser drops the declaration.

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 won't do

It doesn't reorder properties, merge adjacent rules with identical selectors, collapse shorthands, or remove declarations that later rules override. It doesn't shorten colours either, so #223344 stays as written instead of becoming #234. Vendor prefixes are left exactly as you typed them. It won't add or remove any based on guesses about your browser targets.

That's on purpose. 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: you want a stylesheet smaller before it goes somewhere, and you don't want anything 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 work together: minify first, then compress.

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

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