How to minify CSS
Paste the code
Paste your CSS or open a .css file, or try “Example”.
Minify
Press “Minify” to see the size before and after and the savings.
Copy or download
Copy the result or download it as a .min.css file to upload instead of the original.
What changes and what doesn’t
| Example | Details | |
|---|---|---|
| Removed | Spaces, line breaks and comments | Except whitespace that means something, like .a .b and calc(1px + 2px). |
| Shortened | 0.50 → .5, #FFFFFF → #fff | The same value in fewer characters. |
| Removed | Empty rules .a{} and the last ; | They have no effect on the page. |
| Not changed | Rule order; no merging | Merging saves a little but can change which rule wins. |
| Not changed | Custom property values --x | Kept as written, since JavaScript may read them. |
Tips
Modern CSS works. Nesting (& .title), @layer, @container and :has() stay intact. Some older minifiers silently drop or break them.
Clear error messages. An unclosed bracket or string? We give you the line and column and take you there.
Source maps. We remove the sourceMappingURL comment, since the old map no longer matches the new file.
FAQ
Does minifying CSS change how my site looks?
No. We never reorder or merge rules and we keep every space that has a meaning. We tested it on 17 real files, including Bootstrap, Bulma, Font Awesome and this site’s own CSS, comparing every rule before and after with an independent CSS parser and with the browser itself: nothing changed.
How much does CSS minification save?
Usually 10% to 40%, depending on whitespace and comments: for example 17% on Bootstrap and 33% on Tachyons. gzip on your server shrinks the transfer further.
Why don’t you merge similar rules?
Merging or moving rules can, in rare cases, change which rule applies to an element, and the extra saving is usually small (1% to 3%). We chose safety.
Are licence comments removed?
No. Comments starting with /*! are kept, because some libraries’ licences require it. You can turn that off.
Which libraries does it use?
The code is read by css-tokenizer from the csstools project (MIT), which follows the W3C spec, and our own code writes the result. We tried csso and clean-css: the first silently drops nested rules, and the second breaks @container and nesting.