> css | minify | optimize <
// Compress, shrink, and optimize CSS to ship smaller stylesheets and load pages faster
Instant Minification
Strip comments, collapse whitespace, and drop redundant semicolons in milliseconds. No network round-trip, no upload, instant feedback.
Savings Report
See original size, minified size, percentage saved, and a visual compression ratio bar so you can quantify the bandwidth wins at a glance.
Beautify Mode
Re-expand minified CSS into readable, indented form. 100% client-side, browser-based, your code never leaves your machine.
// ABOUT CSS MINIFICATION
How CSS Minification Works:
Following the CSS Syntax Module Level 3 (W3C) tokenization rules, the minifier removes /* comments */, collapses runs of whitespace, strips spaces around braces, colons, semicolons, and commas, and drops the optional trailing semicolon before each closing brace. The approach mirrors algorithms used by csso and clean-css. The result is functionally identical CSS with significantly fewer bytes.
Example:
.btn { color: red; padding: 4px; } -> .btn{color:red;padding:4px}
Common Use Cases:
- >Shrinking production stylesheets for faster page loads
- >Reducing bandwidth on mobile and low-power devices
- >Improving Core Web Vitals (LCP, FCP)
- >Inlining critical CSS in HTML
- >Preparing CSS for embedding in JS bundles
>> frequently asked questions
Q: Will minification change how my CSS behaves?
A: No. The output is byte-different but semantically identical to the input. The minifier only removes whitespace, comments, and the optional trailing semicolon before each closing brace, none of which affect rendering. The CSS Syntax Module Level 3 specification explicitly classifies these tokens as insignificant whitespace, so no browser will treat the compressed result differently from the original verbose source.
Q: Does the tool send my CSS to a server?
A: No, this minifier is fully browser-based and client-side. It runs entirely in your browser using regular expressions and pure JavaScript string operations. Your stylesheets are never uploaded, logged, cached, or transmitted to any backend. You can disconnect from the network entirely after the page loads and the tool will continue to work perfectly.
Q: How much smaller will my CSS get?
A: Typical hand-written CSS shrinks 20 to 40 percent after minification. Heavily commented or pretty-printed CSS can compress by 60 percent or more. The exact savings are shown in the stats bar, including a compression ratio bar that visually indicates how aggressively your input was reduced. Combined with gzip or brotli on the wire, the network savings stack further.
Q: Can I undo a minification?
A: Use the Beautify button to re-add line breaks and indentation to a minified blob. The result is human-readable but cannot recover the original comments, since they were stripped during minification. Beautify is useful for code review of compressed bundles, debugging vendor styles, or unwrapping a one-line CSS file pulled from production into a maintainable form.
Q: What about advanced optimizations like rule merging?
A: This tool focuses on safe, lossless minification at the token level. For deeper optimizations such as merging selectors, removing dead rules, or shorthand collapsing, use a dedicated build tool like cssnano, csso, clean-css, or PostCSS plugins. Those tools build a full AST and can reason about semantic equivalence, while a regex-based minifier deliberately stays conservative to avoid breaking edge cases.