CSS Minifier and Beautifier
Shrink a stylesheet by removing comments and whitespace, or expand minified CSS into readable, indented rules.
Result
Paste CSS to minify or beautify it.
How to use this tool
- Paste CSS and choose Minify or Beautify.
- The size before and after is shown. Copy the result or download a .css file.
How it works
Minifying removes comments (except those starting with /*!, which usually hold licences), collapses whitespace, and drops spaces around { } ; , > + ~ and the last semicolon in each block. Strings are never changed, spaces inside parentheses (as in calc(100% - 10px)) are kept, and a space before a colon in a selector — such as a :hover, which means something different from a:hover — is kept.
Beautifying puts each declaration on its own line with consistent indentation.
Example
Minifying
.a > .b { color : red ; margin: 0 auto } becomes .a>.b{color:red;margin:0 auto}.
Privacy and limitations
- Everything runs in your browser; nothing you paste is uploaded or stored.
- This is a safe whitespace-and-comment minifier. It does not merge rules, shorten colours or remove unused CSS.
- Serve CSS with gzip or Brotli compression for the biggest savings.
Frequently asked questions
How much smaller will my CSS be?
Typically 15–30% for hand-written CSS with comments and indentation; less for CSS that is already compact.
Is minified CSS slower to debug?
Yes — keep the original for editing and use source maps or the beautifier when you need to read production CSS.