How to Minify CSS: Tools, Techniques, and What Actually Matters
A practical guide to CSS minification — what it removes, how much it saves, and when manual tools make sense over build pipelines.
For a 100 KB stylesheet, minification typically cuts 25–45 KB. That’s less to transfer on every page load, no behavior changes, and no code to maintain. It’s one of the lowest-effort performance wins in front-end development.
What a minifier removes
Comments. Whitespace used for indentation. Newlines. Trailing semicolons before }. Spaces around :, ;, {, }, and ,.
None of that affects what the browser renders — it’s formatting for human readers. Strip it and the parsed CSS tree is identical to the original. The browser produces exactly the same result; it just didn’t have to download the extra characters first.
How much you’ll actually save
Depends on the source. Hand-written CSS with comments and consistent indentation usually shrinks 25–45%. A file that’s already been processed by a build tool might drop another 3–8% — mostly trailing semicolons and minor whitespace. And if the file is already one long line with no comments, there’s basically nothing left to remove.
The stat display in the CSS Minifier shows exact bytes saved, which is more useful than guessing.
Using this tool
Paste your CSS into the input box. The output updates in real time as you type — no button needed, though one is there if you prefer to trigger it manually. Hit Copy to grab the result.
It handles plain CSS. If you’re using SCSS or Less, compile to CSS first, then run it through here.
When a manual tool makes sense
For any production site with a build process, minification should happen automatically. Webpack, Vite, Parcel, and esbuild all do it in production mode — you shouldn’t be pasting stylesheets into a form for every deploy.
But a manual tool has its place. You might be working on a static site without a build step, trimming an inline <style> block, or checking how much a third-party stylesheet compresses before deciding whether to inline it. Those situations come up more often than they should.
CSS file size in context
The median CSS payload on desktop pages in 2024 was around 75 KB uncompressed, per HTTP Archive. After minification, that might drop to 50 KB. After gzip, closer to 15 KB. Minification and compression compound each other — a minified file compresses better because there’s less redundant text for the compressor to handle.
That said, CSS is rarely the bottleneck. Images, JavaScript, and font loading usually matter far more for page load time. Minify because it’s easy and free, not because it’ll transform your Core Web Vitals score.
What minification doesn’t do
It won’t remove unused CSS rules — that’s PurgeCSS or similar. It won’t merge duplicate selectors, rewrite longhand properties to shorthand, or touch selector specificity. Those are optimization tasks.
Minification just removes formatting. It’s the cheapest pass with the lowest risk of breaking anything.
Paste your stylesheet into the CSS Minifier. Everything runs in your browser — no upload, no account required.