Compress CSS
Compress and minify CSS online. Remove comments, whitespace, and optimize selectors for smaller file sizes and faster page loads.
About
Uncompressed CSS inflates page weight and increases Time to First Paint. Every redundant whitespace character, every block comment left from development, every unoptimized hex color like #FFFFFF instead of #FFF adds bytes that browsers must download, parse, and apply before rendering. On mobile connections at 1.6 Mbps effective throughput, a 200 KB stylesheet delays rendering by over 1 s. This tool performs real minification: comment stripping, whitespace collapsing, zero-unit removal, hex shorthand conversion, and empty ruleset elimination. It does not rewrite selectors or merge rules, so output is safe to deploy without regression testing.
Typical compression ratios range from 15% to 40% depending on coding style. Heavily commented, well-formatted source files see the largest gains. Already-minified files may see 0 - 2% further reduction. This tool approximates gzip-level textual savings only. Actual transfer size depends on your server’s Content-Encoding header configuration.
Formulas
The compression ratio R is computed as the percentage reduction in byte length between the original and minified output:
Where Soriginal = byte length of input CSS (UTF-8 encoded), and Sminified = byte length of output CSS after all transformations. Byte length uses the TextEncoder API for accurate multi-byte character counting rather than String.length which counts UTF-16 code units.
The minification pipeline applies transformations in a specific order to avoid conflicts: 1) strip comments, 2) preserve string literals, 3) collapse whitespace, 4) optimize values, 5) remove redundant tokens, 6) restore string literals. String and url() content is extracted before processing and reinserted after to prevent corruption of data URIs or quoted content.
Reference Data
| Optimization | Example Before | Example After | Typical Savings |
|---|---|---|---|
| Remove block comments | /* header styles */ | (removed) | 5 - 20% |
| Collapse whitespace | margin: 0 auto ; | margin:0 auto | 10 - 25% |
| Remove last semicolon | color:red;} | color:red} | 1 - 3% |
| Shorten hex colors | #AABBCC | #ABC | 0.5 - 2% |
| Remove zero units | 0px | 0 | 0.2 - 1% |
| Shorten leading decimals | 0.5em | .5em | 0.1 - 0.5% |
| Remove empty rulesets | .a { } | (removed) | 0.1 - 1% |
| Collapse rgb to hex | rgb(255,0,0) | red | 0.5 - 1.5% |
| Remove unnecessary quotes | font-family: "Arial" | font-family:Arial | 0.1 - 0.5% |
| Normalize none/0 | border: none | border:0 | 0.1 - 0.3% |
| Lowercase keywords | COLOR: RED | color:red | 0% (consistency) |
| Remove charset if UTF-8 | @charset "UTF-8"; | (removed) | 0.1% |
| Typical total (formatted source) | 100 KB | 65 KB | 25 - 40% |
| Typical total (already minified) | 100 KB | 98 KB | 0 - 2% |