Pasting a readable stylesheet like body { margin: 0; padding: 0; } into the CSS Minifier and clicking Minify CSS returns body{margin:0;padding:0}. The minifier removes comments, blank lines, and every space that is not required, leaving a smaller stylesheet that works exactly the same in the browser. It runs entirely in your browser, so nothing you paste is uploaded anywhere.

Minify CSS without changing what it does

A minified stylesheet keeps the same rules and the same cascade, it just drops the characters the browser does not need. The 427-character sample on this page becomes 405 characters and 6 rules in a single line, a saving of 22 characters or about 5 percent. Larger files with heavy comments and indentation often shrink by 20 percent or more.

The minifier reads the CSS character by character. It separates comments, strings, url() data URIs, and punctuation from plain spacing, then rebuilds the stylesheet using only the spaces that matter. Property names, colors, numbers, and the order of rules never change.

Three controls shape the output

Two checkboxes in the input card tune how aggressive the minification is. Strip comments removes every /* comment */ block. Remove final semicolons drops the semicolon before each closing brace, which CSS does not require. Both are on by default and either can be switched off for output you plan to edit later.

The Live checkbox runs the minifier as you type; switch it off and the output only updates when you press Minify CSS. Load example fills the input with the 427-character sample stylesheet, and Clear empties both cards. After minifying, Copy places the result on the clipboard and Download .css saves it as minified.css.

Where spaces stay

Not every space is removable. The minifier keeps all the spaces that carry meaning, like the one between a tag and its descendant class in ul li, or the two around the plus sign in a flexbox selector such as li + li. Values that need internal separation keep it, so margin: 0 auto does not collapse into margin:0auto.

Strings and data URIs are copied through untouched. The Base64 payload in background: url(data:image/png;base64,iVBORw0KGgo=) keeps every semicolon and comma inside the parentheses. Media queries keep their shape too, so @media (max-width: 767px) stays @media (max-width:767px).

Reading the size report

The stats row under the output shows three numbers: characters in and out, the saved amount with its percentage, and the rule count. For the sample input the report reads 427 chars in, 405 out, Saved 22 (5.2%), 6 rules. The saved figure is the gap you get from comment removal and whitespace compression, which is exactly what minified CSS delivers to the browser.

Worked examples

A comment and blank lines disappear. The input

/* Page reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

becomes

*{margin:0;padding:0;box-sizing:border-box}

Descendant selectors keep their separating space. The input .sidebar .menu { display: none; } minifies to .sidebar .menu{display:none} because the space between the two classes is what makes the selector match.

Spaces around operators in calc() are preserved. The input width: calc(100% - 20px); becomes width:calc(100% - 20px), keeping the minus sign spaced as CSS requires. Removing these spaces would break the calculation, so the minifier leaves them alone.

Why the browser does all the work

Minification happens in the current tab with no network request, so proprietary stylesheets and internal design tokens can be compressed without sending them to a server. The size report and the compact result appear in the same view, and the file is ready to copy or download as soon as you press Minify CSS.

CSS Minifier