CSS Beautifier & Minifier

A CSS formatter makes stylesheets readable by putting each rule and declaration on its own line with consistent indentation, or does the reverse and minifies CSS into the smallest equivalent text for production. Developers use it to inspect a site's compressed stylesheet, tidy hand-written CSS, or shrink a stylesheet without a build step.

This formatter beautifies with js-beautify and minifies with a conservative minifier that protects strings, calc() and selector spacing, then shows the size before and after. Your stylesheet never leaves the browser, so unreleased designs stay private.

Minify removes comments, collapses whitespace, drops spaces around braces, colons, semicolons and commas, and removes the last semicolon in each rule. Text inside quotes is never touched, the spaces calc() needs around + and − are kept, and a space before a colon in a selector such as a :hover is preserved, because removing it would change its meaning.

It doesn't rewrite values or merge rules, so the result behaves exactly like the original. Build tools such as Lightning CSS or cssnano can squeeze out more.