CSS Minifier — Minify CSS to Reduce File Size in Your Browser
Minify CSS by stripping whitespace, comments, and redundant declarations. Runs entirely in your browser. No uploads, no accounts, no limits.
CSS Minifier
Minify and compress CSS code. Works entirely in your browser — no uploads.
CSS minification is one of those tasks that sounds like it should not matter — every byte of CSS over the wire is a byte the browser does not have to parse, and modern connections ship megabytes per second — but the bytes add up. A typical web page ships 50 to 200 KB of CSS, of which 20 to 40 percent is whitespace, comments, and redundant declarations that the browser ignores. Minification strips all of that, leaving the same cascade with the same specificity, the same computed styles, the same rendering. The reduction is free performance: a smaller CSS file parses faster, applies faster, and counts less against any performance budget the site has.
The non-obvious thing about minification is what counts as redundant. The safe preset (the default here) does only the obvious things: strips comments, collapses whitespace, removes trailing semicolons, shortens hex colors (#ffffff to #fff). The aggressive preset goes further: merges rules with the same selector (h1, h2 { color: red; } and h1, h2 { font-weight: bold; } become one rule), removes empty rules, strips leading zeros (.5em instead of 0.5em), and combines longhand properties into shorthand where it is semantically equivalent. The aggressive preset is safe for plain CSS but can break some preprocessor output and some older hacks — test on a copy before overwriting the source.
For a final hand-off: if the goal is shipping CSS to production, run the output through a real build pipeline (esbuild, Vite, Webpack) — those tools combine, minify, autoprefix, and tree-shake in one pass. The browser tool is the right pick for one-off minification, for debugging a single file, or for inspecting what a minifier does to CSS you did not write. If the goal is a critical CSS extract (the minimum CSS needed to render the above-the-fold content), that is a different tool — a tree-shaker like PurgeCSS or Critters walks the HTML and pulls only the rules actually used.
How to use
Paste your CSS
Drop the CSS into the input area, or load a .css file via the file picker. The minifier accepts any valid CSS — vendor prefixes, custom properties, media queries, and modern selectors are all handled.
Pick an aggressiveness level
Safe (default) strips whitespace and comments, preserves every rule. Aggressive also collapses to single-line declarations, merges rules with the same selector, and removes empty rules. Both are semantically equivalent.
Copy or download the result
Copy the minified CSS to your clipboard, or download it as a .min.css file. The size reduction percentage is shown above the download button so you can verify the gain.
Frequently asked
Does minification change the rendered output?
No. The minified CSS produces the exact same cascade, specificity, and computed styles as the original. The only changes are whitespace removal, comment stripping, and declaration shortening — all of which are invisible to the browser.
How much smaller is minified CSS?
Typical reduction is 20 to 40 percent for hand-written CSS and 10 to 20 percent for framework output (Bootstrap, Tailwind). Highly-commented stylesheets with whitespace can shrink by 50 percent or more.
What is the difference between this and a CSS bundler?
Is the source map included?
No — minified CSS has no source map by default. For production debugging, generate a source map in your build pipeline (the `--source-map` flag in cssnano or esbuild) and keep it separate from the shipped .min.css file.
Will this work on Tailwind or Bootstrap output?
Yes — the minifier operates on plain CSS regardless of how it was generated. Tailwind and Bootstrap output is already pretty compact, so the additional gain is smaller (10 to 20 percent) than for hand-written CSS.
Limitations
- No source map outputThe minified CSS does not include a source map. For production debugging, generate one in your build pipeline. The minifier here is the right pick for one-off minification, not for a complete build setup.
- No CSS-in-JS transformationStyled-components, Emotion, and other CSS-in-JS libraries produce JavaScript that embeds CSS strings. This minifier only handles plain CSS. Run the JS through a JS minifier first, or use a CSS-in-JS-aware build tool.
- No autoprefixerVendor prefixes (-webkit-, -moz-, -ms-) are preserved as-is. If the input is from an older codebase with manual prefixes, run it through an autoprefixer first to drop prefixes that are no longer needed for current browser baselines.
Platform notes
- macOS
- For command-line work, `npx csso-cli input.css -o output.min.css` is the equivalent. The browser tool is the right pick for one-off minification where installing Node and the csso package is not worth the time.
- Windows
- PowerShell cannot minify CSS natively. The browser tool is the right pick for ad-hoc work; for build pipelines, use the clean-css or csso packages through npm. The minification algorithm here matches clean-css's safe preset.
- Linux
- GNU coreutils does not have a CSS minifier. The standard CLI equivalent is `npx clean-css-cli input.css -o output.min.css`. The browser tool is the right pick for content pasted from a chat or a documentation page.
- Web
- Runs entirely client-side. Works offline once the page has loaded. The clean-css library that powers the safe preset is the same code path used by the npm package, with the same output for the same input.