CSS Minifier

Drop your CSS in and it comes back smaller, comments and dead whitespace gone, rendering exactly as it did before, all in your browser with nothing uploaded. The reason I'd pick this over the dozen other free CSS minifiers is narrow and specific, it's what the thing refuses to break. Most of those free minifiers are a regex doing find-and-replace under a nicer coat of paint. They sweep the text, delete anything shaped like a space or a comment, and hope for the best. That holds up on plain CSS right until you hand it a url() carrying an inline SVG, or a .menu :hover selector, and then it quietly corrupts your file and hands it back looking innocent. This one reads your CSS in context. It always knows whether it's sitting inside a string, a url(), a comment, or out in the open, so it can tell a real comment from a comment-shaped string, and a space that matters from one that's only there because you indented.

The actual work is dull, which is exactly what you want from a minifier. It strips comments, collapses the whitespace browsers ignore anyway, drops the redundant last semicolon before each }, and reports the real bytes saved in UTF-8, which is the number that crosses the wire rather than a character count. All of it runs locally, with nothing uploaded. Plenty of the online minifiers quietly send your stylesheet to a server you've never heard of, which is a rotten deal when the file is a client's proprietary CSS, so this one never lets it leave the tab, whatever you paste in. On a file with a lot of comments and indentation, shaving twenty to forty percent is common.

1. Paste your CSS into the top box. One rule, a single component, or an entire stylesheet, it makes no difference. There's no size cap past what your browser can hold in memory, so a few hundred KB is nothing.
2. Read the result below. It minifies as you type or paste, so there's no button to press and no run step.
3. Check the three tiles for the original size, the minified size, and the percent you saved.
4. Copy the output with the button and drop it wherever the compressed CSS needs to go.
5. Hit Load sample if you want to watch it work. That sample deliberately packs a comment, a data-URI SVG background, and a content string with fake braces inside it, so you can see exactly what gets touched and what's left alone.

You've probably pasted a stylesheet into a minifier and watched an SVG background come back as garbage. A data-URI is stuffed with characters that look structural to a regex, colons and semicolons and slashes, even braces inside the SVG markup. A blind find-and-replace spots a /* in there and starts treating your markup as a comment, or spots a stray ; and deletes the space beside it. It has no clue it's standing in the middle of a string.

This tool walks the file one character at a time and never loses its place. Anything inside a string or a url() comes back exactly as written, your inline SVG, a base64 image, a content: "/* not a comment */" that's really just text. It physically cannot reach in and change those, and that's the entire point of building it the slow way.

The other place a stray space matters is inside a selector, where it's load-bearing. .card :hover picks out a hovered element sitting inside the card. Remove the space and .card:hover targets the card itself. Those two select completely different things, and a minifier that strips the space around every colon will happily turn the first into the second and change what your stylesheet matches, all while your source looks perfectly fine. That's an afternoon gone to a bug that was never in your code. This tool tracks how deep it is inside the braces, so it knows a colon in a { } block is a declaration it can safely tighten (color : red becomes color:red) and a colon out in a selector is something it leaves alone.

The other decision baked in here is restraint, and it's deliberate. A lot of tools sold as minifiers are really optimizers that rewrite your CSS to squeeze out a few more bytes. This one won't do any of that. It won't collapse #ffffff to #fff, won't turn margin: 0px into margin: 0, won't merge two .a rules or shuffle your declaration order. Those rewrites are usually safe, and usually is doing a lot of work in that sentence, and a minifier that surprises you is worse than one that's boring.

So it stays boring on purpose. Its entire job is deleting the characters a browser already discards, which means the output cannot render any differently from what you fed in. If you want the aggressive stuff, run a real optimizer like cssnano as a deliberate, tested build step where you'll actually notice if it breaks something. Don't inherit those rewrites by accident from a paste box.

One thing it does keep on purpose is a comment that starts with /*!. That bang is the old convention minifiers respect for license and copyright banners. Write your header as /*! ... */ and it rides through untouched, while every plain /* ... */ comment gets stripped, which is where most of the savings come from anyway.

And if this CSS lives in a repo and ships on every deploy, don't minify it by hand at all. Wire cssnano or your bundler's minifier into the build and forget about it. You get source maps that route too, which no paste box can ever give you, because all it ever sees is the text you dropped in. This tool is for the other moments. A one-off snippet, a <style> block headed into a CMS field, or a fast read on how much a file will shrink before you commit to setting up a whole toolchain.