CSS Minifier

The CSS Minifier compresses CSS files by 60-80% without changing their behavior. Removes all unnecessary whitespace (spaces, tabs, newlines), strips comments, shortens color codes (#ff0000 → #f00), omits trailing zeros (0.5 → .5), removes default values where safe, and more. The output is byte-identical in effect to your source CSS — just dramatically smaller. Essential for production deploys: smaller CSS = faster page loads = better Core Web Vitals = better SEO.

CSS is typically 5-10% of a page's total bytes but loaded synchronously — it blocks rendering. A 100KB CSS bundle minified to 25KB saves 75KB on every page load. Across thousands of visitors, that is significant bandwidth. Combined with gzip/brotli compression, the HTTP wire transfer can be 90%+ smaller than source. Modern build tools (Webpack, Vite, Rollup) minify automatically, but this tool is perfect for ad-hoc minification — single files, third-party CSS before inclusion, email templates, or any CSS outside a build pipeline.

CSS minification applies multiple optimizations. Typical reduction: 60-80% of source size.

Whitespace removal:

- Space between selectors and braces: .class { color: red; } → .class{color:red}
- Newlines between declarations.
- Indentation.
- Blank lines.

Comment removal:

- /* comments */ removed (except special /*! preserved */ comments used for licenses).

Value shortening:

Colors:
- #ffffff → #fff
- rgb(255, 255, 255) → #fff (if opaque)
- black → #000
- white → #fff

Zero values:
- 0px, 0em, 0% → 0 (units dropped when value is 0)
- 0.5 → .5
- 0.0 → 0

Margin/padding shorthand:
- margin: 10px 10px 10px 10px → margin: 10px
- margin: 10px 20px 10px 20px → margin: 10px 20px

Double quotes vs single quotes:
- url("image.png") → url(image.png) (when no special chars)
- "Arial" vs 'Arial' — shortened based on context

Semicolon optimization:
- Last declaration in a rule can omit semicolon: color: red} instead of color: red;}

Empty rule removal:
- .unused {} — empty rule removed (provided it has no pseudo-elements with content)

What is preserved:

- All CSS behavior unchanged.
- Vendor prefixes preserved.
- !important flags.
- Important comments with /*! */.
- Custom properties (--var-name).
- Media queries, container queries, supports queries.

Advanced optimizations (not always applied):

- Duplicate rule merging: two identical rules combined. Risky — may change specificity.
- Unused rule removal: requires knowing which rules are actually used (PurgeCSS territory).
- Property shorthand combining: separate properties merged into shorthand.

These optimizations can change specificity or remove useful rules. This minifier applies only safe optimizations.

Combined with gzip/brotli:

Minification + compression:
- Source: 100KB
- Minified: 30KB (70% reduction from source)
- Gzipped: 8KB (97% reduction from source)

Most HTTP servers auto-apply gzip/brotli. Minification helps before compression kicks in.

When to minify:

- Production: always. Ship minified CSS.
- Development: no. Debug with source CSS.
- Build tools handle this: Webpack, Vite, Rollup, esbuild all minify in production mode.

Modern build tools do this better:

Production build pipelines (PostCSS + cssnano, esbuild) do more aggressive minification than browser tools — dead code elimination, tree shaking. For new projects, use a build tool. This standalone minifier is for ad-hoc or legacy cases.

CSS Minifier vs CSS Formatter: Minifier compresses for production. Formatter expands for readability. Opposite operations; lossless roundtrip. See our CSS Formatter.

This tool vs cssnano: cssnano is an advanced PostCSS-based minifier with many optimization levels and plugins. More aggressive, more configurable. This tool is simpler and runs in browser.

This tool vs clean-css: clean-css is a popular Node.js minifier. Runs on server/CLI. Similar optimization capabilities.

Minification vs gzip compression: Both reduce file size but differently. Minification removes unnecessary characters. Gzip compresses the resulting bytes. Use both — minify at build time, gzip at HTTP layer.

Minification vs critical CSS extraction: Minification reduces file size. Critical CSS identifies which CSS is needed for above-the-fold rendering. Both optimize for Core Web Vitals; complementary not competing.

Manual minification vs build tools: Modern build pipelines (Vite, Webpack) minify automatically in production. This tool is for ad-hoc minification of individual files, legacy projects, or standalone CSS files. For new projects, use build tool minification.