CSS Minifier
Strip comments, whitespace, and redundancy from CSS. See size before/after and the saving percentage.
What is this for?
CSS that's readable in source — with comments, indentation, and meaningful whitespace — bloats the file your users download. A structural minifier strips all the cosmetic bytes (comments, runs of whitespace, redundant zeros, equivalent shorter hex codes) without changing the rules' meaning. This tool runs that pass in your browser and shows the size before/after so you can see the saving.
When to use it
- One-off shipping a CSS snippet inline in an HTML email or a blog post template, where you want the bytes shrunk but don't have a build chain.
- Quickly checking how much "fat" is in a stylesheet before deciding whether a real optimiser is worth wiring up.
- Pasting a vendor's pretty-printed CSS to slim it down for inclusion in a third-party widget.
What it does
- Strips block comments (
/* … */) — single-line//isn't valid plain CSS anyway. - Collapses whitespace around
{ } : ; ,and combinators (> ~ +). - Drops trailing semicolons before
}. - Trims leading zeros (
0.5→.5) and removes units from zero (0px→0). - Shortens hex colours where exact (
#aabbcc→#abc).
Common gotchas
- This is a structural minify, not a full optimiser. It won't merge duplicate selectors, reorder rules, or rewrite shorthand. For that, run
cssnanooresbuildin your build pipeline. - Source maps aren't generated. If you debug minified CSS in production, ship them separately.
- Don't minify the CSS you commit. Commit pretty source; minify at build/deploy. Mixing the two makes diff review miserable.
- Modern compression dominates. Brotli/gzip on the wire does much of what minification does. The biggest savings come from removing unused rules — a job for tree-shaking, not minification.