CSS minifier
Shrink CSS files and see exactly how much you saved.
Runs in your browser. Nothing you type is sent anywhere.
- Shows bytes saved
- Removes comments
- Nothing uploaded
How to minify CSS
- Paste your CSS.
- Check the size saved in the stats row.
- Copy or download the minified CSS.
What gets removed
- Comments written as /* ... */
- Whitespace and line breaks between rules and declarations
- A trailing semicolon right before a closing brace
- Duplicate or redundant rules, where csso can merge them safely
- Extra semicolons and rule blocks left empty with no declarations inside them
Typical size savings
| Starting point | About how much smaller |
|---|---|
| Hand-written CSS with comments | 20 to 30 percent |
| Already compact CSS | 5 to 10 percent |
| CSS generated by a preprocessor | 10 to 20 percent |
When to minify, and when not to
- Minify right before deploying, not while actively editing, since a readable stylesheet is much faster to debug.
- Skip minifying a file that is already served gzipped and small, where the size difference is not worth the extra build step.
When minifying makes the biggest difference
- Stylesheets shared across many pages, since the saved bytes multiply by every page load.
- Large design systems or component libraries with lots of repeated, mergeable rules.
- Sites without a build pipeline, where hand-written CSS is served directly with no other minification step.
- A CSS framework trimmed down to only the utility classes actually used on the page.
CSS minifier FAQ
How much smaller will my CSS get?
Typically 10 to 30 percent, more if the original has a lot of comments and whitespace, less if it is already compact.
Does minifying change how my page looks?
No. Minifying only removes whitespace, comments and redundant syntax. The rules that apply to your page stay the same.
Does this merge duplicate rules?
Yes, where it is safe to do so, which can shrink the file further than whitespace removal alone.
Should I keep the original file?
Yes. Keep the readable version for editing and use the minified one only in production.
Which minifier does this use?
csso, the same CSS minifier used by several bundler plugins. It also merges some duplicate and redundant rules beyond plain whitespace removal.
Is minified CSS still safe to paste into a stylesheet?
Yes, it is standard CSS with the whitespace stripped out. Any browser or build tool reads it exactly the same as the original.
Does it remove vendor prefixes I still need, like -webkit-?
No. Vendor-prefixed properties and values stay exactly as written. Minifying only removes whitespace, comments and safely mergeable rules, never a property your CSS actually declares.
What happens to CSS custom properties (variables)?
They are kept as-is, including their -- names and values, since minifying does not rename or resolve custom properties.