Minify and compress CSS code to reduce file size
Built & maintained by Pappu Venkata Subbi Reddy, founder of Clacify · Updated August 2026
CSS Minifier strips everything from a stylesheet that a browser doesn't need to render your page correctly, but a human editing the file does: comments, line breaks, indentation, and the spaces around selectors, braces, colons, and commas. The result is functionally identical CSS — same selectors, same rules, same cascade — just smaller in bytes. This matters because CSS is typically render-blocking: a browser won't paint the page until it has downloaded and parsed the stylesheet, so shaving kilobytes off it directly speeds up the point at which your page becomes visible. It's a one-step tool for developers preparing a production build: paste your readable, commented development CSS in, copy the compact output, ship it.
The minifier works as a sequence of text transformations, applied in order: first, every /* ... */ comment block is removed outright — including multi-line comments. Next, runs of whitespace (spaces, tabs, newlines) collapse down to a single space. Then, whitespace immediately before or after the structural characters { } : ; , > ~ + is removed, since CSS doesn't require spacing around them to parse correctly — ".card { color: red; }" and ".card{color:red}" are the same rule to a browser. A redundant trailing semicolon right before a closing brace is then dropped, since it's the last declaration in the block and doesn't need one. Finally, spacing around "!important" is normalised so it reads consistently. What this does not do — and it's worth being clear about — is rename classes, remove unused selectors, or merge duplicate rules; those require actually parsing the CSS's meaning (like a tool such as PurgeCSS does), whereas this is a fast, safe, purely textual minification.
| Version | CSS | Bytes |
|---|---|---|
| Before | .card { color: red; /* accent color */ margin: 0 auto; } | ~55 bytes |
| After | .card{color:red;margin:0 auto} | ~30 bytes |
A ~45% reduction on this tiny snippet. Real-world stylesheets with more comments and formatting typically see 20–30% reduction; heavily commented design-system CSS can see up to 50%.
Browsers hold off painting a page until the CSS in the
has finished downloading and being parsed — this is intentional, so users don't see an unstyled flash of content, but it also means CSS size directly affects Largest Contentful Paint (LCP), a Core Web Vitals metric that factors into Google's search ranking. A smaller stylesheet downloads and parses faster, particularly on slower mobile connections where every kilobyte adds measurable milliseconds. Minification is one of the cheapest wins available for this — it requires no code changes, no restructuring, just running your existing CSS through a pass like this one before deploying.Minifying CSS reduces the size of the CSS you already have — it doesn't identify or remove CSS you're not actually using. A 200 KB stylesheet where only 40 KB of rules are ever applied to your live pages will minify down to something like 140-160 KB, still shipping 100+ KB of dead weight. That's a different problem (unused-CSS removal, sometimes called "tree-shaking" for CSS) that tools like PurgeCSS or UnCSS solve by cross-referencing your CSS against your actual HTML/JS. Minification and unused-CSS removal are complementary, not the same step — for the biggest file-size win, both matter, but this tool specifically handles the minification half.
For a one-off — a quick stylesheet for a static page, a CodePen snippet, a small client site without a build process — pasting into this tool takes seconds and needs no setup. For an actively developed production app, minification is normally automated as part of the build (Vite, Webpack, and most bundlers do this by default for a production build), so you're not manually re-minifying every time you change a line of CSS. This tool fills the gap for the cases a build pipeline doesn't cover: quick edits to a legacy site, CSS embedded directly in an email template or CMS, or just checking how much smaller your stylesheet could get before wiring up tooling.
Typical CSS minification reduces file size by 20–30% for normal stylesheets and up to 50% for heavily commented or whitespace-rich CSS. For a 100 KB stylesheet, expect 65–80 KB after minification. Further reduction is possible with gzip compression on the server (typically an additional 70–80% reduction).
Yes. Always serve minified CSS in production to reduce file size and page load time. Use your readable (un-minified) CSS during development and run the minifier as part of your build process (via Webpack, Vite, or Parcel). Faster load times improve user experience and Google PageSpeed scores.