CSS Minifier
CSS Minifier compresses your stylesheet by stripping comments, collapsing whitespace, removing the spaces around braces, colons, semicolons and commas, and dropping the final semicolon in each block. The result is identical styling in far fewer bytes.
It runs entirely in your browser and shows how much you saved. Minified CSS downloads faster and is what you serve in production.
How to use CSS Minifier
- 1
Paste your CSS
Drop in a stylesheet or a block of rules.
- 2
Check the savings
The original and minified sizes appear with the percentage saved.
- 3
Copy the minified CSS
Grab the compact output and serve it in production.
What gets removed — and what is kept
The minifier deletes comments, collapses every run of whitespace, and removes the now-redundant spaces around block punctuation. These changes are invisible to the browser, so your styling renders exactly the same.
It deliberately preserves the spaces around combinators and inside functions like calc(), where a value such as calc(100% - 2rem) requires the spaces to remain valid. Correctness comes before squeezing out the last few bytes.
Why minify CSS
Stylesheets are render-blocking: the browser must download and parse them before painting the page. Smaller CSS means a faster first paint, which is why minification is a standard production step.
To make a minified stylesheet readable again — for debugging or editing — run it through the CSS Beautifier. The two tools round-trip cleanly.
Frequently asked questions
- Will minifying change how my page looks?
- No. Only characters the browser ignores are removed, so the selectors, properties and values are unchanged and the page renders identically.
- Does it break calc() or combinators?
- No. Spaces inside calc() and around combinators like > and + are preserved, because removing them there would change the meaning.
- Is my CSS uploaded?
- No. Minification runs entirely in your browser.
Last updated: