Squeeze every byte out of your stylesheets
Your development CSS is full of stuff browsers don’t care about: comments explaining why you chose that shade of blue, blank lines between sections, spaces around colons, that trailing semicolon before every }. Humans need those things. Browsers don’t.
Paste your CSS, click minify, and the tool strips it all out. You get the same exact styles in fewer bytes. It also shows the before-and-after sizes so you can see how much you saved, typically 15-40% depending on how heavily commented your code is.
What gets stripped
Comments (/* ... */), extra whitespace, spaces around {, }, :, ;, and ,, trailing semicolons, empty lines. Basically everything that makes CSS readable. color: red; becomes color:red. margin: 0 auto ; becomes margin:0 auto.
What doesn’t change: your selectors, property names, values, and the cascade order. The browser renders the minified CSS identically to the original. If something looks different after minifying, there was a bug in your CSS to begin with, not in the minification.
When to use this vs cssnano
If you’ve got a build pipeline with PostCSS or cssnano, use that for production. Those tools do smarter things like merging duplicate selectors and shortening color values.
This tool is for everything else. You need to minify a one-off CSS file that isn’t part of a build system. You’re inlining critical CSS in a <style> tag and want it compact. You’re preparing an email template where every byte counts because Gmail clips emails over 102KB. Lighthouse flagged your unminified CSS and you just want to fix it quickly.
For the reverse operation, making minified CSS readable, the CSS Formatter does that.
FAQ
Will it break my styles?
No. Only non-functional characters are removed. The browser interprets the result identically.
How much smaller will it be?
Between 15% and 40% typically. Heavily commented CSS with generous whitespace sees the biggest reductions. Already-compact CSS won’t shrink much.
Media queries and keyframes?
Handled normally, whitespace and comments inside @media and @keyframes blocks get removed just like everywhere else.
Client-side?
Yes, nothing leaves your browser. Safe for stylesheets with proprietary class names or design system tokens.