CSS Minifier/Beautifier
Minify or beautify CSS code with size comparison.
Examples
| Input | Result |
|---|---|
| body { margin: 0; padding: 0; } | body{margin:0;padding:0} |
| /* reset */ * { box-sizing: border-box; } | *{box-sizing:border-box} |
| .a{color:red}.b{color:blue} | .a { color: red; } .b { color: blue; } (beautified) |
| h1 , h2 { font-weight: bold ; } | h1,h2{font-weight:bold} |
About this tool
Paste CSS and minify it by stripping comments, collapsing whitespace, and removing unnecessary characters. The output is a compact single block ready for production use. You can also go the other direction and beautify minified CSS back into a readable format with consistent indentation.
This runs entirely in the browser, so you can safely paste styles from any project without worrying about data leaving your machine. It handles standard CSS syntax including media queries, keyframes, and nested selectors.
Frequently asked questions
Does the minifier remove comments?
Yes. All CSS comments are stripped during minification to reduce file size.
Can I beautify minified CSS instead of minifying it?
Yes. The tool works in both directions. You can take minified CSS and format it with proper indentation and line breaks for readability.
How much size reduction should I expect?
It depends on how much whitespace and how many comments your CSS contains. Typical stylesheets see a 15-30% reduction, though heavily commented files can shrink more.