CSS Minifier
Minify CSS with csso — safe AST-based minification that merges duplicate rules and preserves string values. Live, with compression stats.
About this ToolHow it works, benefits & use casesTap to collapse
Compress CSS for production with csso, an AST-based minifier that does far more than strip whitespace. Because csso builds a real syntax tree, it can safely merge duplicate rules and consolidate declarations while preserving string values such as content text and attribute-selector arguments. Paste a stylesheet and the minified result regenerates live, with the output panel showing the new byte size and the percentage saved. A stats line below reports the original bytes, minified bytes, bytes saved, and the savings percentage so you can see exactly how much smaller your CSS got. The built-in example demonstrates duplicate-rule merging and a tricky attribute selector that must survive untouched. Everything runs in your browser — no upload, no sign-up — so your styles stay on your machine.
How to Use
- 1Paste your CSS into the input box, or click Load example to load a sample with a duplicate rule and an attribute selector.
- 2The minified CSS regenerates live as you type — the output panel shows the byte count and savings percentage.
- 3Press Minify CSS to confirm the result and surface any minification error.
- 4Check the stats line for original, minified, and saved bytes plus the percentage saved.
- 5Copy the minified CSS, download it as minified.css, or share the URL with your input encoded in it.
Key Benefits
- AST-based minification with csso — merges duplicate rules intelligently
- Preserves string values such as content text and attribute-selector arguments
- Reports original, minified, and saved bytes plus percentage saved
- Byte sizes measured with UTF-8 encoding for real transfer-size accuracy
- Live minification as you type, with a shareable URL
- Smaller output than naive whitespace-stripping minifiers thanks to rule merging
- Runs entirely in-browser — your stylesheets are never uploaded
Common Use Cases
- Producing a smaller production stylesheet for faster page loads
- Minifying CSS before inlining it into a critical-CSS block or email
- Merging accidentally duplicated rules from a large or generated stylesheet
- Measuring how much a stylesheet shrinks before deciding to ship it
- Compressing a component or widget’s CSS for embedding
0 characters · live
Paste CSS above to minify it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Unused CSS DetectorFind CSS selectors never matched by your HTML, see how many bytes you can save, and get cleaned CSS - with a safelist for dynamic classes
- CSS Clip Path GeneratorDraw clip-path shapes by dragging vertices on a live canvas — polygon, circle, ellipse, inset — with 25 ready-made shapes. Export CSS, SCSS, Tailwind, or JS
- Parallax Effect CalculatorBuild multi-layer parallax with pure-CSS perspective, JS scroll, or React — scrollable live preview
- Border Radius GeneratorCraft CSS border-radius visually with per-corner and elliptical control, a live preview, presets, and CSS plus Tailwind output
- Box Shadow GeneratorBuild layered CSS box-shadows visually with a live preview, x/y/blur/spread/color/inset controls, presets, and CSS plus Tailwind output
- Critical CSS GeneratorExtract above-the-fold critical CSS from your HTML and CSS, with a coverage report, an inline style tag, the deferred CSS, and an async-load snippet
csso parses your CSS into an abstract syntax tree and optimises it structurally. Beyond removing whitespace and comments, it can merge duplicate or overlapping rules and consolidate declarations, often producing smaller output than a minifier that only deletes spaces. Because it understands the syntax, string values stay intact.
Yes. csso treats string literals as data, so text in a content property or an argument inside an attribute selector such as a[href^="https://"] is preserved exactly. This is a common failure point for regex-based minifiers, which can corrupt those values.