What it does
This CSS minifier removes everything a browser does not need to render your styles. It strips outcomments, collapses whitespace and line breaks, and tidies the spacing around braces, colons, semicolons and commas. The result is a smaller file that downloads faster, which means quicker page loads and better Core Web Vitals for your visitors.
How to use it
- Paste your CSS into the input box, or start typing.
- The minified output updates live, or press Minify to run it on demand.
- Check the size line to see exactly how many bytes you saved.
- Press Copy and drop the result into your production stylesheet.
How CSS minification works
CSS is whitespace tolerant, so browsers ignore the spaces, tabs and newlines you add to keep your source readable. A minifier takes advantage of that. First it deletes /* ... */ comments. Then it collapses every run of whitespace down to a single space, and removes spaces sitting around the structural characters : ; , since they carry no meaning. Finally it drops the last semicolon before each closing brace, because that one is optional. None of these changes touch your selectors, properties or values, so the minified stylesheet behaves identically to the original, just in far fewer bytes.
For day to day work, keep your readable source file in version control and minify a copy for production. That way you get clean, commented CSS to edit and a lean file to ship.
Frequently asked questions
Is my CSS sent anywhere?
No, it is minified in your browser and never uploaded.
Will minifying break my styles?
No, it only removes characters browsers ignore, the rules stay the same.
How much smaller will it get?
Often 20 to 50 percent, depending on comments and whitespace.
Can I reverse it?
You can re-indent it with a beautifier, but the original comments are gone.
Related: JSON Formatter