Format CSS into readable rules, or minify it. Shows characters before and after. Runs in your browser.
Format puts every declaration on its own line, indents it one level inside its braces and leaves a blank line between rules. A selector list such as h1, h2, h3 is split over one line per selector. Choose 2 spaces, 4 spaces or a tab for the indent. Rules inside a media query are indented one more level. Comments stay where they are. The page lays the text out and nothing more: it does not sort properties, merge rules, add a missing semicolon or change a value. The last declaration of a rule keeps the semicolon, or the lack of one, that you typed.
Minify removes every comment except those that start with a slash, a star and an exclamation mark, which are usually licence notes. It removes line breaks and the spaces around braces, semicolons, commas, greater-than signs and parentheses, and the space after the colon of a declaration. It also drops the last semicolon before a closing brace. Strings in quotes and url() values are copied exactly as written. Spaces that carry meaning stay: the space in a descendant selector such as .a .b, the space before a colon in a selector such as a :hover, and the spaces around + and - inside calc(). Values are never rewritten, so 0.50px stays 0.50px and #FFFFFF stays #FFFFFF.
The result shows the characters before and after. In Minify it also shows how much was saved as a percent of the original, rounded to a whole number, and the number is 0% when the CSS was already compact. In Format it shows the size change instead, which is usually a plus because indents and line breaks add characters. The line count is for the result. Characters are counted as JavaScript counts them, so an emoji counts as 2.
Both modes run in this tab and nothing is uploaded or saved. Only your choices are remembered in this browser. Format uses a separate formatting download that loads when the page opens, so the first result takes a moment. Minify uses code on this page. Up to 500,000 characters are handled; above 100,000 the result follows your typing after a short pause. Neither mode checks the CSS, so a missing brace or a misspelled property is not reported.
The minifier only removes comments and white space that CSS ignores, and it keeps the spaces that matter in selectors and calc(). It does not shorten colours or numbers. Test the result on your page as you would any build output.
Indents and line breaks are characters. A 12 character rule such as a{color:red} becomes 20 once each declaration has its own line and indent. The size change figure shows this.
No. A missing semicolon, an unclosed brace or an unknown property is not reported or repaired. Broken CSS is laid out as far as the formatter can read it.
No. Format keeps comments. Only Minify removes them, and it keeps comments that start with /*! so licence notices survive.
It is built for plain CSS. SCSS and Less features such as mixins or // comments are not understood, and the minifier treats // as ordinary text, so do not minify SCSS or Less with it.