CSS Minifier

What this tool does

Paste a stylesheet on the left (or open a .css file) and it is minified on the right the instant you stop typing — no button to hunt for. You get the smallest safe version of your CSS, its size before and after in real bytes, and the exact percentage saved. Then copy it or download it as style.min.css. Everything happens on your device: the minifier is a full CSS parser vendored into the page, so nothing is uploaded.

Why a parser, not a regex

The tempting way to minify CSS is a handful of regular expressions: delete /* … */, squeeze runs of spaces, drop the space around {, }, : and ;. It works on tidy input and quietly corrupts the awkward bits. A quoted value such as content: "a /* b */ c" contains what looks like a comment; a blind regex strips the middle out. calc(1px + 2px) needs the spaces around the operator — remove them and you get calc(1px+2px), which browsers reject. A url(data:image/svg+xml;…) is full of colons, semicolons and slashes that mean nothing structural but trip pattern-matching. This tool avoids all of that by running clean-css, which tokenises the stylesheet first, so a brace inside a string is never mistaken for a rule boundary.

Worked example

Feed it this (172 bytes):

/* Card */
.card {
    padding : 1.5rem   1.25rem;
    color: #ffffff;
    width: calc(100% - 2rem);
}

and you get back (about 78 bytes, ~55% smaller):

.card{padding:1.5rem 1.25rem;color:#fff;width:calc(100% - 2rem)}

Note what changed and what did not: the comment and every scrap of layout whitespace are gone, #ffffff collapsed to the equivalent #fff, but the required space inside calc() stayed exactly where it belongs. Swap that color for a content: " keep me " string and the interior spaces would survive byte-for-byte too.

What it removes and what it keeps

How the byte savings are measured

The “before” and “after” numbers are the true UTF-8 byte length of the input and output, read with the browser's TextEncoder — never the character count and never a guess. The percentage is simply (before − after) / before. Counting bytes rather than characters matters the moment your CSS contains anything multi-byte — an accented word in a comment, an emoji in a content value, non-Latin text — because those weigh more than one byte each and a character count would understate the real transfer size.

Honest limits

This is a conservative, level-1 minifier by design. It will not do the aggressive cross-rule restructuring (merging adjacent rules, reordering properties across selectors) that some tools offer, because those transforms can, in rare cases, change which declaration wins and therefore how the page looks — and a minifier that alters your cascade is worse than one that saves a few extra bytes. So expect solid, safe savings, not the absolute theoretical minimum. It minifies a single stylesheet's text: it does not follow or inline @import URLs, fetch remote resources, or rewrite relative url() paths (rebasing is off), all of which would need network or file-system context this page deliberately never has. Very large files are processed synchronously, so a multi-megabyte stylesheet may briefly freeze the tab while it works. And it optimises standards-compliant CSS — if you lean on non-standard browser hacks, give the output a quick read before shipping.