CSS Minifier

Shrink CSS for production instantly

Original CSS

Options

Minified CSS

Overview

The CSS Minifier strips comments and collapses whitespace from your stylesheet to reduce file size for production — smaller downloads, faster parsing and rendering. Paste readable CSS and get compact output instantly, with a live before/after size comparison and an adjustable compression level.

What This Minifier Controls
  • Whitespace collapse: a quote- and comment-aware minifier removes spaces, line breaks, and blank lines while leaving string contents untouched
  • Comment removal: strip /* ... */ comments, or keep them — for example to preserve a license header — via the preserve-comments toggle
  • Color optimization: shorten 6-digit hex colors and rgb() values to 3-digit hex shorthand wherever the channels allow it
  • Compression level: Normal mode does safe whitespace, comment, and color minification; Aggressive mode also strips redundant leading zeros (0.5px → .5px) and drops the digits from zero-value lengths (0px → 0)
  • Size comparison: see original size, minified size, and percentage reduction side by side
  • Downloadable output: save the minified result directly as a .css file
When You'd Minify CSS
  • Shrinking a stylesheet before deploying it to production to reduce page load time
  • Preparing a small CSS snippet for inlining in a <style> tag or an HTML email without bloating it
  • Quickly checking how much a stylesheet will shrink before wiring up a full PostCSS or build pipeline
  • Minifying a one-off stylesheet for a CodePen, gist, or static prototype where a build step isn't practical
  • Comparing minified size against a performance budget for a Core Web Vitals or Lighthouse audit
How to Minify CSS
  1. 1.Paste your CSS into the input editor, or upload a .css file
  2. 2.Choose Normal or Aggressive compression, and decide whether to preserve comments
  3. 3.Minified output and the size-reduction percentage appear automatically
  4. 4.Copy the output or download it as a .css file
  5. 5.Check the before/after byte count to confirm the size savings before deploying
Edge Cases Worth Knowing
  • Aggressive zero-stripping (0px → 0) is safe for length units, but it skips string and comment content and leaves the math inside calc() expressions untouched
  • Whitespace inside quoted strings — font-family names, content: "...", url() paths — is always preserved exactly; only structural whitespace outside strings and comments is removed
  • This minifier does not rename classes, merge duplicate selectors, or remove unused rules — those require a build-tool-integrated optimizer like cssnano or PurgeCSS
Limitations
  • This is whitespace, comment, and color minification, not full optimization — for maximum size reduction (selector merging, duplicate-rule removal, unused-CSS elimination), use a build-tool-integrated minifier like cssnano or PurgeCSS
  • Minified output loses all readability — always keep your original source under version control
  • Very large stylesheets may be slow to process entirely in the browser — for production build pipelines, integrate minification into PostCSS or your bundler instead of a one-off browser tool
Need to Go the Other Way?

If you have minified or compressed CSS and need to read or debug it, use the CSS Beautifier instead. It restores indentation, sorted properties, and consistent spacing so the stylesheet is actually readable.