Overview
What this tool does
Minify CSS to shrink its file size by removing comments and whitespace, or beautify minified and messy CSS into a clean, readable format. The minify mode shows exactly how many bytes you save. Everything runs in your browser, so your stylesheet is never uploaded.
Smaller, faster
What minifying removes
- Comments (/* ... */)
- Line breaks and indentation
- Spaces around braces, colons, semicolons, and commas
- The final semicolon in each rule block
- Extra blank lines
The styles render identically, but the file is 20-50% smaller, so it downloads faster. Faster CSS improves page load speed and Core Web Vitals, which benefits both users and SEO.
Readable again
What beautifying does
Beautifying expands CSS into one declaration per line with consistent indentation and a blank line between rules. Use it to make minified production CSS editable, or to tidy up messy stylesheets pasted from elsewhere.
Practical advice
When to minify
- Single files or quick experiments: minify here before using
- Whole projects: let your build tool (Vite, webpack, PostCSS) minify automatically
- Always keep an unminified source for editing and version control
- Minify as the last step, after autoprefixing and other processing
Behind the scenes
Privacy and how it runs
Runs in your browser
Common questions
How much smaller does minified CSS get?
Typically 20-50%, depending on the amount of whitespace and comments. Well-formatted, heavily commented stylesheets shrink the most. The tool shows the exact percentage.
Will minifying change how my site looks?
No. Minifying only removes characters the browser ignores. The rendered styles are byte-for-byte equivalent in effect.
Does minified CSS load faster?
Yes, slightly — a smaller file transfers quicker, especially on slow connections and for large stylesheets. Combined with gzip or Brotli compression on your server, the savings add up.
Can I un-minify CSS?
Yes — switch to beautify mode and paste minified CSS to get a readable, indented version back. Removed comments can't be recovered, since minifying deletes them.
Is this different from a CSS optimizer?
This tool minifies (removes whitespace and comments). Full optimizers also merge duplicate rules, shorten color values, and drop unused styles. For most pages, minification gives the bulk of the size benefit with zero risk.