How to use the CSS Minifier & Beautifier
- Paste CSS into the left box, or open or drop a .css file.
- Minify removes whitespace and comments, shortens values like
#ffffffto#fff, and merges duplicate rules. - Switch to Beautify to format CSS with your preferred indentation.
- Copy or download the result. Use as input sends the output back to the left and switches mode.
What minification does
A minifier rewrites CSS into the smallest form that behaves exactly the same. This one uses csso, a mature open-source optimizer, which goes beyond removing spaces:
- Removes comments, whitespace and the last semicolon in each block.
- Shortens values:
0px→0,#FFFFFF→#fff,10px 20px 10px 20px→10px 20px. - With Merge & restructure, combines rules with identical selectors or declarations.
- Keeps
/*! … */comments, which by convention hold licenses you must not remove.
.btn { padding: 10px 20px 10px 20px; color: #FFFFFF; }
→ .btn{padding:10px 20px;color:#fff}
Do I still need it with gzip?
Yes, a little. Servers usually compress CSS with gzip or Brotli, which removes much of the repetition, but minified CSS still compresses smaller and parses slightly faster. Build tools like Vite, webpack and Lightning CSS minify automatically; this page is handy for one-off files, WordPress themes and checking what a minifier does.
Beautify to debug
Minified CSS from a website or library is one huge line. Beautify adds line breaks and indentation so you can read and edit it. It won't restore removed comments or the original formatting.
Frequently asked questions
Is minified CSS safe to use?
Yes. csso only applies transformations that keep the CSS behaving the same. If you rely on rule order in tricky ways, untick <b>Merge & restructure</b> for a safer, whitespace-only minify.
Does it support modern CSS?
Yes, including custom properties (variables), nesting, @layer, @container and media queries.
Is my CSS uploaded?
No. Everything runs in your browser.
Can I minify JavaScript or HTML here?
Not yet. This tool is for CSS only.