π¨ CSS Minifier / Beautifier
Compress CSS for production or beautify minified CSS for debugging.
How to Use This Tool
Paste your CSS into the input box and click Minify to compress it for production, or Beautify to expand minified CSS back to readable form. The byte counts below the panels show your exact size reduction.
Select Minify to compress, or Beautify to expand minified CSS for reading and editing.
Paste your CSS into the Input CSS box. The output updates as you type.
Check the input and output byte counts and the savings percentage shown below the boxes.
Copy the output or download it as a .css file using the buttons below the output.
What CSS Minification Actually Does
Minification is a simple transformation: the browser does not need comments, newlines, or spaces between selectors and declarations to parse CSS correctly. Removing them yields a smaller file that downloads faster. A typical stylesheet sees 20-40% reduction from minification alone. Combine that with gzip or Brotli compression on the server and you often hit 70-80% total reduction. The minifier here strips block comments (/* ... */), collapses all whitespace sequences to nothing, removes spaces around colons, semicolons, braces, commas, and child/sibling combinators, and drops the last semicolon before a closing brace since it is optional. What it does not do: reorder or merge declarations, shorten property values, or convert color formats. For aggressive optimization in a production build pipeline, tools like cssnano go further. But for a quick size reduction before deploying a stylesheet or pasting CSS into an email template, this tool covers the practical cases. The beautifier is equally useful when you download a vendor stylesheet and need to read through it to understand or override specific rules.
Common Use Cases
Frequently Asked Questions
How much does minification reduce CSS size?
Typically 20-40% reduction. Gzip compression on top of minification provides 60-80% total reduction. Both are recommended for production.
Is minified CSS still valid CSS?
Yes, minified CSS is fully valid β just without optional whitespace, newlines, and comments. Browsers parse it identically to formatted CSS.
Does this minifier change my CSS logic?
No. It only removes comments and unnecessary whitespace. It does not reorder, merge, or change property values.
Why keep comments in CSS?
During development, comments document sections. They should be removed in production builds for performance. License comments (/*! ... */) should typically stay.
Should I minify or use a CSS preprocessor?
Both: Sass/Less + minifier is ideal. The preprocessor adds power; the minifier optimizes output for delivery.