Answer: Paste CSS above — comments and whitespace are stripped instantly and the minified output is ready to copy, fully client-side.
csso 5.0.5 in your browser — whitespace strip or full restructure
Quick answer: minifying CSS deletes comments, whitespace, and redundant values, and can merge rules that repeat selectors. Percent saved = (input − output) ÷ input × 100. On our 772-byte sample stylesheet, csso with structure kept outputs 572 B (25.9% saved) and with restructuring 555 B (28.1% saved; 321 B gzipped). Custom properties and the media query survive every pass. Runs locally — your stylesheet is never uploaded.
| Preset | What it does | 772-B sample → | Saved |
|---|---|---|---|
| Keep structure | Deletes comments, whitespace, trailing semicolons; value shorthand folds (24px 24px 24px 24px → 24px) | 572 B | 200 B (25.9%) |
| Restructure | …plus merges duplicate selectors, drops overridden declarations, reorders safely | 555 B | 217 B (28.1%) |
| Restructured, gzipped | Transport compression on top | 321 B | vs 326 B for keep-structure |
Measured with csso 5.0.5 — the exact script this page loads — on the sample behind the Sample button. Stylesheets with more comments and repeated blocks shrink further; already-processed files shrink less.
This is csso 5.0.5 (MIT), the CSS optimizer CSS-OSS toolchains have trusted for a decade, loaded from a CDN and running entirely in your tab. It's not a regex cruncher: csso parses your stylesheet into an AST, rewrites it, and regenerates clean CSS, which is why the output is valid even when the input had quirks a naive tool would mangle.
Bytes saved = input − output; percent = (input − output) ÷ input × 100. The tool counts UTF-8 bytes, and when your browser supports CompressionStream it shows gzip sizes too — the honest number for anything served over HTTP, since text/html+css compresses well and raw savings overstate the network win.
Paste a stylesheet (the Sample button loads ours), pick a preset, and the output updates as you type. Keep structure is the choice when you want byte-predictable output that still mirrors your source order. Restructure squeezes further by merging rules with identical selectors and discarding declarations that later rules override. Copy or download when you're happy; errors surface csso's own parse message with a line reference.
The Sample button loads a 772-byte product-card stylesheet: a :root block of custom properties, three rules, a hover state, and a @media (max-width: 640px) override. Keeping structure takes it to 572 bytes — the comment goes, "Helvetica Neue", Arial, sans-serif keeps its quotes, 24px 24px 24px 24px folds to 24px, and 0px 0px 8px 0px trims to 0 0 8px. Restructuring reaches 555 bytes. Gzipped, that's 321 bytes across the wire — on a 772-byte file the gzip win (391 → 321) is smaller than the minify win, which is exactly why both columns are shown: minify first, then let transport compression do its job.
Custom properties and media queries ride through untouched in both passes — they're declarations and at-rules like any other, and csso merges only what the spec guarantees equivalent.
It strips comments, whitespace, trailing semicolons, and safe-to-remove formatting, and can shorten colors, zero values, and font-weight keywords where equivalent. The result is byte-for-byte equivalent CSS that browsers parse identically. Nothing that affects the cascade or specificity is changed.
Typical stylesheets shrink 20–40%, more when the original is comment-heavy and generously formatted. Savings compound on large sites where CSS is fetched on every page load. Note that gzip already compresses whitespace well, so the post-gzip gain is smaller than the raw byte reduction.
An in-browser minifier using CSSO needs no Node toolchain, config, or command line — paste, click, copy. It is ideal for one-off files, quick patches, or environments where you cannot install build tools. For recurring production builds, a bundler pipeline is still the better long-term setup.