#ffffff → #fff), merges duplicate @media blocks, and removes redundant rules. Typical stylesheets shrink 25–45% before gzip; gzipped they shrink 75–85% from raw. Our free CSS minifier runs csso in your browser with full support for modern CSS — custom properties, nesting, container queries, @layer, OKLCH colours.CSS is render-blocking by default. Until the browser downloads, parses, and applies your stylesheet, the page can’t paint a single pixel. Every kilobyte of CSS in the critical path adds latency. Minification is the cheapest fix: a 84 KB stylesheet with comments and indentation becomes a 52 KB minified file (−38%) and a 12 KB gzipped payload (−86%). For a Tailwind-based site that ships 200 KB of utility CSS, that’s a difference users notice on a 4G connection.
Our CSS minifier uses csso (the engine behind Yandex’s stack) with optional clean-css fallback for legacy edge cases. It handles modern CSS — CSS variables, native nesting, container queries, @layer, the OKLCH colour space, and the new :has() selector — without breaking syntax. Paste any size, get instant minified output, and download or copy. This guide covers what minification does to CSS specifically, the size savings to expect, and the gotchas that turn a working stylesheet into a broken one.
What CSS minification actually does
| Transform | Example | Savings |
|---|---|---|
| Whitespace + comments | remove all /* … */ and indentation |
15–30% |
| Hex shortening | #ffffff → #fff |
2–4% |
| Zero unit drop | 0px → 0 |
1–2% |
| Leading zero drop | 0.5em → .5em |
<1% |
| Shorthand collapse | margin: 0 0 0 0 → margin: 0 |
1–3% |
| Selector dedupe | merge two .btn{...} rules |
2–8% |
@media merge |
two identical media queries → one block | 3–10% |
| Property merge | border-top:0;border-right:0 → border:0 |
1–4% |
Total typical reduction: 25–45%. Hand-written stylesheets shrink more (lots of whitespace and comments); pre-minified frameworks shrink less (already optimised). Tailwind output, post-PurgeCSS, typically shrinks another 15–25% with csso on top.
Modern CSS that minifiers used to break
Older minifiers (clean-css 3.x and YUI Compressor) corrupt modern CSS in several ways. csso handles all of these correctly:
- CSS custom properties:
--brand: #635BFFvalues andvar()references are preserved exactly. Old minifiers stripped fallbacks. - Native nesting:
.card { .title { } }is preserved (modern browsers parse it natively without a preprocessor). - Container queries:
@container (width > 400px) { … }is preserved with all syntax variants. - OKLCH and color-mix(): new colour formats are passed through; csso doesn’t try to “shorten” them since the format is already minimal.
- :has() selector: the parent selector is preserved without quote-mangling.
- @layer: cascade layer ordering is preserved exactly — never reordered.
How to minify CSS in your browser
- Open the CSS minifier
- Paste your CSS or drop in a
.cssfile - Pick the engine: csso (default) or clean-css (legacy)
- Toggle options: dedupe selectors, merge @media, restructure (aggressive)
- Click Minify. Output appears with before/after sizes
- Copy or download as
.min.css
Common gotchas
- “Restructure” is opt-in for a reason. The aggressive csso option reorders selectors that look equivalent. If your CSS relies on cascade order (later rules override earlier ones), restructuring can change which rule wins. Test the minified output visually before deploying.
- Don’t minify a CSS file that’s imported with
@importin another file. Some minifiers inline imports; csso doesn’t by default. Bundle first (PostCSS / esbuild), minify the output. - Vendor prefixes are preserved. Don’t expect minification to remove
-webkit-prefixes — the minifier doesn’t know which browsers you target. Use Autoprefixer to add/strip prefixes based on yourbrowserslist. - Source maps are essential for production debugging. Without them, every DevTools error points at line 1 column 240. Generate a
.mapalongside the minified file. - Don’t minify already-minified files. Files ending in
.min.cssrarely shrink more than 1–2% on a second pass. Skip them. - Critical CSS extraction is a different job. Minification reduces the size of all your CSS. Critical CSS extraction inlines only the rules needed for above-the-fold content. Use a tool like Critters or Penthouse for that.
When NOT to use a browser CSS minifier
If your build pipeline already includes Vite, Next.js, esbuild, Webpack, or Parcel, CSS minification is built in — you don’t need a separate tool. Use this browser minifier for one-off pages built without a build system, third-party stylesheets you’re embedding, snippets pasted into a CMS that doesn’t have a build step, or to inspect what csso does to a specific block of CSS. For Node automation, install csso directly (npm i -D csso-cli) and run it from a script.
Frequently asked questions
How much does gzip add on top of CSS minification?
About 50% additional. A 52 KB minified CSS file gzips to roughly 12 KB. Brotli (modern CDN default) shrinks 8–15% beyond gzip. CSS responds especially well to compression because of repeated property names — always serve .css with a Content-Encoding header.
Will minification break my Tailwind output?
No. Tailwind’s JIT engine produces CSS that minifies cleanly with csso. Run PurgeCSS first (Tailwind does this automatically in production), then minify. Expected pipeline: Tailwind → PostCSS → cssnano/csso → gzip. Tailwind v4 includes Lightning CSS for both transformation and minification.
Does the minifier support CSS variables and the new colour spaces?
Yes. csso preserves CSS custom properties, var() references with fallbacks, OKLCH, OKLab, color-mix(), and relative-colour syntax exactly. It won’t try to shorten values it doesn’t fully understand — safer than aggressive optimisation.
Can I minify SCSS or Less directly?
No — minify only after compilation. SCSS and Less must compile to plain CSS first (via Sass, Dart Sass, or Less), then run through the minifier. Some build tools chain these automatically; for one-off files, paste the compiled output here.
Is my CSS uploaded?
No. csso runs in your browser via WebAssembly. Stylesheets are never uploaded — useful for proprietary or pre-release styles.
What’s the difference between minify and prettify?
Opposite jobs. Minify removes whitespace to shrink size for production. Prettify (CSS Formatter) adds whitespace and indentation for readability. Use a formatter when you’re editing; use a minifier as the final step before deploy.
Related tools and guides