CSS Minifier
Strip comments and whitespace, shorten colours, and see exactly how many bytes you save.
About CSS Minifier
Delete the spaces around the minus in calc(100% - 20px) and the browser throws the whole declaration away — that single case is the difference between a real minifier and a few regex replacements. This tool tokenises the stylesheet character by character, so strings, url() bodies and media query conditions survive intact while only the dead bytes go. Everything runs in your browser; nothing is uploaded.
How to use CSS Minifier
- 1
Paste your CSS into the input box, or press Sample to load a test sheet.
- 2
Set the four options: shorten colours, trim redundant zeros, drop empty rules, keep licence comments.
- 3
The output appears instantly; the cards show original size, minified size, bytes saved and the percentage cut.
- 4
Hit Copy and drop the result into your style.min.css.
Frequently asked questions
Why was 0px not turned into 0?
Because it is not always safe. A unitless number is invalid inside calc(), and time values such as 0s must keep their unit. So only dead zeros are removed: 0.50em becomes .5em and 1.0 becomes 1, but 0px stays 0px.
Why is the space between li and first-child still there?
In a selector the space is itself a combinator. li :first-child means the first child inside an li, while li:first-child means the li that is a first child. Space is only removed next to the > + and ~ combinators and next to commas, braces and parentheses.
Do all six-digit colours get shortened?
No. Only when all three pairs repeat: #aabbcc becomes #abc, but #aabbcd is left alone. Eight-digit colours with alpha follow the same rule down to four digits, and uppercase hex is lowercased.
What does this tool not do?
It does not merge duplicate rules, build shorthand properties, or strip old vendor prefixes — it only removes bytes that have no effect. Input is capped at 2 million characters so the tab never locks up.