Will minified CSS look different in the browser?

No — visual rendering should be byte-identical to source CSS. Stripping only removes ignored bytes.

How much smaller will my CSS file be?

30-50% typical. Comments-heavy: 40-60%. Already-minified library code: 0-5%.

Should I minify in development?

No — debugging minified CSS is painful. Minify only for production builds.

Should I always combine multiple CSS files into one?

Generally yes — fewer HTTP requests = faster loads. But HTTP/2 multiplexing makes the cost of multiple requests minimal, so the optimization is less critical now.

Does minification affect SEO?

Indirectly — smaller files = faster page loads = better Core Web Vitals = slight SEO boost. Direct effect is small but real.

What about gzip / brotli compression on the server?

Server compression and minification are complementary. Gzip compresses repeated patterns; minification removes redundant content. Both together = smallest transferred bytes.

How do I run this in a build pipeline?

Use a CLI tool: `cssnano` (PostCSS-based), `clean-css` (standalone), `lightningcss` (fast Rust-based). All have npm packages.

What if my CSS breaks after minification?

Almost always: invalid CSS that browsers were lenient about, or aggressive shortening (like calc whitespace). Run through a CSS validator to spot issues before minifying.

Yes — CSS beautifiers re-add indentation and line breaks. Comments are lost.

How is this different from cssnano?

cssnano is the industry-standard CLI/build tool, configurable with dozens of optimization presets. Our online tool runs the equivalent of cssnano's "default" preset for one-off conversions.

Should I preserve comments in production?

Generally no — except license headers. Production users don't read CSS comments. Use the "preserve license" mode if you need legal-attribution comments retained.

Does the minifier touch CSS variables?

Preserves them. Custom property names like `--brand-color` are content-meaningful and stay intact.

CSS Minifier

Free CSS minifier that compresses CSS files by removing whitespace, comments, and shortening common patterns. Critical for production deployment and Core Web Vitals.

CSS input

0 bytes

Minified output —

0 bytes

Auto-minify on input

Share on Social Media:

CSS Minifier: Reduce Stylesheet Size 30-50% Without Visual Change

Our free CSS Minifier shrinks stylesheet file size by stripping whitespace, comments, redundant zeros, repeated rules, and other safely-removable bytes. Paste CSS or upload a `.css` file, get the minified result instantly. Browser-only — your stylesheet never leaves your device. Typical savings: 30-50% for hand-written CSS, 5-15% for already-minified library code, up to 60% when combined with rule deduplication.

Production CSS doesn't need the indentation, comments, or stylistic spacing that development CSS has. Browsers ignore them entirely. Stripping them produces smaller files that download faster, parse faster, and improve Core Web Vitals (Largest Contentful Paint specifically, since CSS is render-blocking). Modern build pipelines (Vite, Webpack, PostCSS-cssnano, Tailwind's JIT mode) handle this automatically. For hand-authored CSS not in a build pipeline, this tool is the manual minifier.

What the minifier strips

Whitespace. Indentation, line breaks, spaces around `{`, `}`, `:`, `;`, `,` — all reduced to minimum. `body { color: red; }` becomes `body{color:red}`.

Comments. Both `/* ... */` block comments stripped. Exception: license/copyright comments matching `/*!` patterns preserved when "preserve-license" mode is on.

Final semicolon in rule. `body { color: red; }` ends with a semicolon before `}`. The semicolon is optional for the last rule. Minifier removes it: `body{color:red}`.

Redundant zero units. `0px`, `0em`, `0%`, `0deg` all equal `0`. Minifier shortens: `margin: 0px 0em 0% 0;` becomes `margin:0`.

Leading/trailing zeros in decimals. `0.5rem` becomes `.5rem`; `0.0005` becomes `.0005`.

Hex color shortening. `#ff0000` → `#f00`, `#000000` → `#000`. Applies when each component pair is doubled.

Lowercase hex colors. Normalize `#FF0000` to `#ff0000` (or shorten to `#f00`). Some browsers handle uppercase fine; lowercase is conventional and matches the shorter form.

Property name normalization. Lowercase all selectors and property names. Browsers are case-insensitive for these, but case mixing wastes bytes.

Removing redundant prefixes. Old vendor prefixes (`-webkit-`, `-moz-`, `-ms-`) for properties now standardized often unnecessary. The minifier can strip outdated prefixes when targeting modern browsers (configurable).

Rule deduplication. If `body { color: red }` appears twice, keeps one. If a property is set twice in the same rule, keeps the latter.

Empty rule removal. `body { }` (no properties) is removed. Same for `@media (print) { }` with no inner rules.

Shorthand expansion / contraction. `margin: 10px 10px 10px 10px` becomes `margin: 10px`. `background-color: red; background-image: url(...)` may become `background: red url(...)` (advanced mode).

What the minifier preserves

`!important` declarations. Preserved exactly.

CSS variables (custom properties). `--brand-color: red;` preserved.

Media queries. `@media (max-width: 768px) { ... }` preserved.

Keyframes. `@keyframes foo { ... }` preserved with all percentage steps intact.

Vendor prefixes for non-standardized properties. `-webkit-overflow-scrolling: touch` (iOS-only) is kept because removing it loses functionality.

Custom selectors. Attribute selectors `[data-state="active"]`, pseudo-class chains, descendant combinators — all preserved.

`!important` exclamation. `color: red !important;` stays. Only the trailing whitespace around it minified.

Operating modes

Default (balanced). Strip whitespace + comments + redundant zeros + final semicolons. Safe for any production CSS.

Aggressive. Default plus shorthand contraction, rule deduplication, color normalization. Verify output looks identical.

Safe (conservative). Strip only whitespace + comments. Preserve all values, all semicolons. Smallest visual-change risk.

Preserve license. Comments matching license patterns (`/*!` etc.) kept. Others removed.

Target legacy browsers. Keeps older vendor prefixes. Useful for sites supporting Internet Explorer or old Android browsers.

Real-world use cases

Pre-deploy minification. Hand-authored CSS not in a build pipeline. Minify once, deploy minified version. Update source as needed; re-minify on each change.

CDN-served CSS. Self-hosted CSS files. Minified versions reduce bandwidth across millions of pageviews.

Email CSS. Email clients strip `