How to use the css minifier and beautifier
- Choose Minify or Beautify.
- Paste CSS or open a .css file.
- For minifying, keep "Restructure rules" on for the smallest output, and choose whether to keep /*! licence comments.
- Select the button to run. The sizes and percentage saved appear above the output.
- Copy the result or download it as a .css file.
Worked example
Merging duplicate declarations
This 115-byte input: .button { padding: 10px 16px 10px 16px; margin: 0px; color: #ffffff; } .card { margin: 0px; color: #ffffff } (with line breaks) minifies with restructuring to .button{padding:10px 16px}, 60 bytes, a 47.8% saving.
How it works
Minification uses CSSO, which parses the CSS into a syntax tree, removes whitespace and comments, shortens values (such as #ffffff to #fff and 0px to 0), and with restructuring merges rules and declarations that are safe to combine. Beautifying uses the js-beautify CSS formatter. Sizes are UTF-8 byte counts.
Frequently asked questions
Is my data uploaded?
No. This tool runs entirely in your browser. Your input is processed on your device and is not sent to our server or stored.
Is restructuring safe?
CSSO only merges rules when it can prove the result is equivalent, and it is used in many build tools. If your CSS relies on unusual cascade order or browser hacks, turn restructuring off and compare.
Does it report CSS syntax errors?
CSSO is tolerant: it skips parts it cannot parse instead of failing. If your source has errors, compare the output with the input.
Should I also gzip my CSS?
Yes. Minification and server compression (gzip or Brotli) work together. Most hosts and CDNs compress text files automatically.
Limitations
- No autoprefixing or unused-rule removal.
- Invalid CSS may be dropped silently rather than reported.