CSS Minifier

Paste CSS, get a minified version that’s typically 30-60% smaller. The minifier strips comments, collapses whitespace, shortens hex colors where safe, removes trailing semicolons before }, and collapses redundant zeros (0px → 0). Everything runs in your browser, so production stylesheets never leave the page.

How to use the CSS Minifier

Paste your CSS. The minifier walks the source, removing every byte that doesn’t affect rendering. Comments go first (preserves /*! */ banner comments by convention). Whitespace collapses to single spaces, then drops where the parser doesn’t need any. Hex colors with three repeating pairs (#ffffff, #aabbcc) shorten to three chars (#fff, #abc) only when the abbreviation is exact. 0px, 0em, 0% drop their unit since CSS treats them all as zero.

The stats line shows before/after byte count and the percentage saved. Typical hand-written stylesheets minify by 30-50%; output from a CSS framework or preprocessor often minifies less because it’s already compact.

About CSS Minifier

CSS minification is one of the cheapest performance wins in web development. Every byte counts: a 200KB stylesheet that minifies to 110KB saves bandwidth on every request and shaves milliseconds off first-paint. Modern build tools (esbuild, vite, postcss, lightningcss) do this automatically, but for hand-edited site files, embedded snippets, or quick experiments, you don’t always want to set up a build pipeline. A browser-based minifier handles those one-off cases without the overhead.

The minifier here is conservative — it does the high-confidence transformations (whitespace, comments, hex shortening, zero-unit collapse) without trying anything that might change rendering. Aggressive minifiers can reorder declarations, merge selectors, and drop duplicate rules; those are useful but require deeper understanding of your codebase to apply safely. For production builds, use lightningcss or esbuild; for quick wins, this tool is enough.

Common use cases

  • One-off optimisation of a hand-edited stylesheet or critical-CSS block.
  • Embedded CSS in HTML emails — every byte counts when inline-styling Gmail-friendly emails.
  • WordPress / Drupal site files — minify before pasting into the theme’s Additional CSS panel.
  • CodePen / JSFiddle demos — shrink for sharing.

Frequently asked questions

Does it parse calc() or other advanced syntax?
Yes \xE2\x80\x94 calc(), var(), nested @rules, @container queries, @supports blocks all pass through unchanged. The minifier preserves anything it doesn't explicitly know how to shrink.

What's the size limit?
Comfortable with multi-megabyte files. Browser memory is the only limit; you'll feel slowness above ~10MB.

Does it produce a source map?
No \xE2\x80\x94 source map generation requires tracking byte offsets through every transformation, which is build-tool territory. For development, use esbuild / vite which produces correct source maps automatically.