Developer Tools
CSS Minifier
Compress CSS by removing comments and unneeded whitespace; see exactly how much you save.
Paste CSS and press Minify to see size savings.
What is a CSS minifier?
CSS minification shrinks a stylesheet by removing comments, collapsing whitespace, dropping the last semicolon in each rule, and shortening zero values — all without changing how the page looks. Smaller CSS downloads and parses faster, which improves page-load times and Core Web Vitals scores. This minifier is careful with quoted strings (font names, content values, URLs), extracting them before touching anything so their contents are never altered, and it shows the exact bytes saved.
How to use this tool
- Paste your CSS into the input box.
- Press Minify — comments are stripped, whitespace around braces, colons, and semicolons is removed, and zero units are shortened.
- Check the size-savings card for original vs minified bytes and the percentage saved.
- Copy the output or download it as a .css file, then verify your pages still render correctly.
Key features
- Removes /* */ comments, including multi-line license headers you may want to keep elsewhere.
- Collapses whitespace and strips spaces around { } : ; , > + ~ selectors and declarations.
- Drops the redundant semicolon before each closing brace.
- Shortens 0px / 0em / 0% to plain 0, and 0.5 to .5 where safe.
- Protects quoted strings (content, font-family, url values) via placeholder extraction.
- Before/after size stats with copy and download, processed fully in your browser.
Common use cases
- Production deploys: shrinking hand-written stylesheets before they go live.
- Email CSS: reducing the weight of style blocks in HTML emails.
- Theme customization: minifying tweaked theme CSS on sites without a build step.
- Performance audits: quickly seeing how much dead weight whitespace adds to a stylesheet.
- Code golf and demos: fitting styles into size-constrained embeds.
Practical tips
- Keep your readable source file — minified CSS is for deployment, not editing.
- Spaces inside calc() are significant (calc(100% - 20px) needs them); this minifier never touches spaces around - + / * so calc() stays valid.
- Whitespace between a media query's "and" and its parenthesis is required — it is preserved.
- Combine with HTML and JS minification plus gzip/Brotli for the full performance win.
- For large projects, move to a build tool (PostCSS, Lightning CSS) that minifies automatically on every deploy.
Frequently Asked Questions
Will minified CSS look any different in the browser?
No. Every transformation — comment removal, whitespace collapsing, dropping the last semicolon — is defined to be visually identical. Always keep the original for editing and spot-check the minified file once.
Why are quoted strings protected?
Values like content: "a ; b" or font-family: "My Font" contain characters and spaces that are significant. The minifier extracts strings first so they are restored byte-identical.
Is calc() safe with this minifier?
Yes. Spaces around - and + inside calc() are required by CSS, and this minifier only removes whitespace around a fixed set of characters that never includes them.
How much smaller does CSS get?
Typically 20–40% for hand-written CSS with comments and indentation. The tool shows your exact before/after sizes.
Does it handle @media queries?
Yes. Media query structure is preserved, including the mandatory space in 'and (min-width: ...)'. Only genuinely redundant whitespace is removed.