How to minify CSS
- Paste your stylesheet. It is minified as you type.
- Check the size before and after, and the percentage saved, in the status line.
- Copy the result or download it as
min.css.
What the CSS minifier changes
- Removes comments, except those starting with
/*!, which conventionally hold licence notices. - Collapses whitespace and removes spaces around
{ } : ; , > ~. - Drops the semicolon before each closing brace.
- Shortens six-digit colours with repeated pairs (
#ffffffto#fff), removes units from zero values (0pxto0) and leading zeros from decimals (0.5emto.5em).
Equally important is what it leaves alone. Quoted strings, url() paths and content values are preserved exactly, the spaces around + and - inside calc() are kept because CSS requires them, and percentages in keyframe selectors are not touched. If braces do not balance, you get a warning instead of broken output.
Minified CSS loads faster and helps metrics such as First Contentful Paint, especially for render-blocking stylesheets. Keep the readable source for editing. All processing happens in your browser.
FAQ
How much does minifying CSS save?
Typically 15–30% before compression, more for heavily commented stylesheets. With gzip or Brotli on top, the transferred size drops further.
Will minifying break my CSS?
Valid CSS keeps working. The minifier preserves strings, url() values and spaces that matter, such as those in calc().
Does it remove unused CSS?
No. Minifying only removes characters. To remove unused rules, use a tool like PurgeCSS in your build.