DEV

CSS Minifier & Beautifier

Shrink a stylesheet for production by stripping comments and whitespace, or beautify minified CSS back into readable code.

INPUT
OUTPUT

          

How it works

Minify removes comments, line breaks and the spaces around braces, colons, semicolons and commas, and drops the last semicolon in each rule. Quoted strings, url(...) values and spaces inside calc() are left exactly as written, so the stylesheet behaves the same — it just weighs less.

Beautify does the reverse: one declaration per line, selectors split across lines, nested rules indented, and a blank line between top-level rules. Use it to read a minified file you didn't write.

Comments that start with /*! are usually licence notices, so they're kept by default. Untick the box to remove them as well. Everything runs in your browser — your CSS is never uploaded.

What this minifier doesn't do

It is a whitespace-and-comment minifier, not an optimizer. It won't merge duplicate rules, shorten colour values (#ffffff to #fff), or remove unused selectors. Build tools such as cssnano or Lightning CSS go further; this tool is for quick, safe, no-install shrinking.

Frequently asked

Is it safe to minify CSS?

Yes. Whitespace and comments have no effect on how CSS renders, and this tool leaves strings, url() values and calc() spacing alone. Always keep your original source file — minified CSS is hard to edit by hand.

How much smaller will my file get?

Typically 15–40%, depending on how many comments and how much indentation the original has. The status line under the editor shows the exact before and after size.

Does it validate my CSS?

No. It only checks that braces are balanced and warns you if they aren't. Misspelled properties or invalid values pass through unchanged.

Can I turn minified CSS back into readable CSS?

Yes — paste it in and press Beautify. Comments that were stripped during minification can't be recovered, but the structure and values come back intact.