CSS Minifier & Formatter Engine I Toolfix.info

Your CSS

Paste CSS code or open a file

Beautify indent

Merge and restructure rules (smaller, safe for most CSS)

Result

0 Boriginal

–result

–smaller

Runs in your browser with CSSO and js-beautify. Your code is not uploaded.

What CSS minification does

Minifying removes everything the browser does not need: comments, line breaks, indentation and the last semicolon in each rule. It also shortens values without changing what they mean, for example #ffffff → #fff and margin: 0px 0px 0px 0px → margin:0. With Merge and restructure on, CSSO also combines rules that share the same declarations and removes properties that are overridden later in the same rule.

Example: the 81-byte input

/* buttons */
.a { color: #ffffff; margin: 0px 0px 0px 0px; }
.b { color: #fff; }

becomes .a{margin:0}.a,.b{color:#fff} (29 bytes).

How much does it help?

Typical stylesheets shrink by 15–30%. Your server’s gzip or Brotli compression already removes much of the repeated whitespace, so the saving on the network is smaller than the numbers above, but minified files still download and parse faster. On WordPress, caching plugins such as WP Rocket can minify CSS automatically; use this tool for custom code, theme files you edit by hand, or to check what a minifier would change.

Beautify (format) mode

Beautify does the opposite: it puts each rule and property on its own line with consistent indentation, which makes minified or messy CSS readable again. Comments are kept.

Good to know

Keep your original, readable file. Edit that one and minify again; don’t edit the minified copy.
Restructuring changes the order of some rules. It is safe for normal CSS, but if a page looks different afterwards, untick the option and minify again.
Normal comments are removed. Comments that start with /*! (usually licence notes) are kept, each on its own line.