CSS Minifier
Paste a stylesheet to strip comments, whitespace and redundant characters. The tool uses the csso optimizer when it can load it and a careful built-in minifier otherwise, and it always tells you which engine ran.
How to use the CSS Minifier
- Paste your CSS into the input box, or press Upload .css (dropping a file also works).
- Choose the engine: Auto uses csso when it can be loaded, otherwise the built-in minifier runs. The badge under the buttons always shows which engine was used.
- Decide on restructuring: with csso you can let it merge and reorder rules for the smallest output, or turn it off for a safer, order-preserving result.
- Press Minify CSS (the output also updates as you type) and check the bytes saved.
- Copy or Download the minified stylesheet and reference it in your site.
CSS minification rules with examples
| Rule | Before | After |
|---|---|---|
Remove comments (keep /*!) | /* nav */ a{…} | a{…} |
Remove whitespace around { } : ; , > + ~ | .a > b , .c { color : red ; } | .a>b,.c{color:red} |
| Drop the last semicolon | {margin:0;padding:0;} | {margin:0;padding:0} |
| Zero lengths need no unit | margin:0px 0em | margin:0 0 |
| Shorter numbers | opacity:0.50; line-height:1.0 | opacity:.5;line-height:1 |
| Short hex colours | #FFFFFF, #2F6B4F, #aabbccdd | #fff, #2f6b4f, #abcd |
| Remove empty rules | .unused { } | (removed) |
| Keep meaningful spaces | a :hover, calc(100% - 20px) | (unchanged) |
Two rules are deliberately left alone by the built-in engine: units on zero values inside functions such as calc(0px + 1em), where the unit is required, and time or percentage zeros like 0s and 0%, which are not interchangeable with a bare 0.
Built-in engine vs csso
| Built-in minifier | csso 5.0.5 | |
|---|---|---|
| Works offline | Yes | Needs the CDN once per visit |
| Whitespace, comments, semicolons | Yes | Yes |
| Zero units, numbers, hex colours | Yes | Yes, plus colour names (e.g. #f00 → red) |
| Merge duplicate selectors and declarations | No (keeps your rule order) | Yes, with restructuring on |
| Typical saving on hand-written CSS | 15–25% | 20–35% |
Worked example
This 78-byte rule set:
.card > h2 ,
.card + .note {
color : #2F6B4F ;
margin : 0px auto 0.0px ;
}
becomes .card>h2,.card+.note{color:#2f6b4f;margin:0 auto 0}: 51 bytes, a saving of 27 bytes or about 35% (27 ÷ 78 × 100). Saved % is calculated as (original bytes − minified bytes) ÷ original bytes × 100, using UTF-8 byte sizes.
Frequently asked questions
What does a CSS minifier do?
It removes everything the browser does not need to apply your styles, such as comments, indentation, line breaks, the last semicolon in each rule and empty rules, and it writes values in their shortest form. The result renders exactly the same but downloads faster.
What is csso and what does restructuring mean?
csso (CSS Optimizer) is an open-source minifier that parses CSS into a syntax tree. With restructuring on, it also merges duplicate selectors and declarations and may move rules, which gives the smallest file. Turn restructuring off if your CSS relies on a very specific rule order.
Why did the built-in engine run instead of csso?
csso is loaded from a public CDN the first time you minify. If you are offline, a network filter blocks the CDN, or you chose “Built-in minifier only”, the tool uses its own minifier instead and says so in the engine badge.
Does minifying CSS break anything?
It should not. Both engines keep strings, url() values, calc() spacing and custom property values intact, and the built-in engine never changes selectors or rule order. Test the page once after minifying, especially when restructuring is enabled.
Why are /*! */ comments kept?
Comments that start with /*! are the convention for license and copyright notices that must stay in distributed files. Untick “Keep /*! important */ comments” to remove them too.
How much smaller will my CSS be?
Hand-written stylesheets typically shrink by 15–30%. Files with many comments or long indentation shrink more. Serve the result with gzip or Brotli for the best transfer size.
Is my CSS sent to a server?
No. Minification runs entirely in your browser. Only the csso library itself is downloaded from the CDN; your code is never uploaded.