🎨 CSS Minifier & Beautifier

Minify CSS by stripping comments and unnecessary whitespace, or beautify minified CSS back into readable, indented code.

Mode

Minify Beautify

CSS

What minifying actually removes

Minify does four passes with regular expressions: delete /* */ comments, collapse every run of whitespace to one space, drop the spaces around { } : ; ,, then remove the semicolon before each closing brace. The sample rule on this page goes from 114 characters to 74, a 35% saving:

.card{color:#333;padding:12px;border-radius:6px}.card:hover{color:#007bff}

Nothing else is rewritten. Colours are not shortened to #fff, zero units are left alone, and duplicate or unused rules stay exactly where they are - so expect 25-40% off a hand-written stylesheet, not the 60% a build-time tool reports.

Where the regex approach breaks down

Strings are not protected. The comma rule rewrites content: "Hello, world" as content:"Hello,world", and a /* */ sequence inside a string is deleted as a comment. Check any declaration that holds quoted text.
Beautify splits on every semicolon, including the one inside url(data:image/png;base64,...), which puts the data URI on two lines and breaks it. It also discards comments, so beautifying minified CSS never brings them back.

Both directions run in this page's JavaScript, so a stylesheet you paste is never uploaded. Keep the original until you have loaded the output in a browser - this is a formatter, not a CSS parser.

Frequently asked questions

Does minified CSS render any differently?

No. Whitespace between tokens and comments carry no meaning in CSS, so the stylesheet behaves identically. The gain is transfer size, which matters most before gzip or Brotli - after compression the difference is a good deal smaller.

Will this keep my /! license / banner?

No. Every comment is stripped, including the /*! form that build tools preserve. If you have to ship a licence header, paste it back at the top of the minified output.

Can it beautify CSS that came out of a bundler?

Usually, yes - it re-indents by brace depth with two spaces and puts one declaration per line, so nested @media blocks come out readable. It does not reorder or split shorthand properties, and it cannot recover names that a bundler hashed.