Paste CSS and get it minified, with the characters before and after. Nothing leaves your browser.
A stylesheet that reached production with its comments and indents costs bytes on every page view. This page opens in Minify mode, so the sample on screen is already shortened and the counts show the characters before, the characters after and the percent saved. The minifier removes comments and the white space around braces, semicolons, commas and parentheses, and it drops the last semicolon in each rule. It does this with plain character rules, not with a CSS parser, so it stays inside what is safe: quoted strings and url() values are copied exactly, the space in a descendant selector is kept, and the spaces around plus and minus inside calc() are kept. It does not shorten colours, remove unused rules or merge selectors, so the saving is usually 10 to 30 percent for hand-written CSS. Switch to Format at any time to read the result again.
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 figure is shown as Saved. Hand-written CSS with comments and 2 space indents commonly drops by 10 to 30 percent. A file that is already minified saves 0%. Servers that gzip files shrink the result further, but that is separate from this page.
No. A value such as #FFFFFF or 0.50px is copied as written. Only comments and white space are removed, so the minified rule means exactly what the original did.
Yes, if it starts with /*! the comment is kept. All other comments are removed.
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.