CSS minifier

CSS minification removes everything the browser does not need, such as comments, indentation, line breaks and some redundant characters, so stylesheets download faster. Smaller CSS matters because CSS blocks rendering: the browser will not paint the page until it has downloaded and parsed it.

How to use it

1. Paste your CSS.
2. Minify it.
3. Copy the result and compare the size reduction.

Example

Input (128 bytes):

/* Buttons */
.btn {
  padding: 8px 16px;
  color: #ffffff;
  margin: 0px;
}

Output:

.btn{padding:8px 16px;color:#fff;margin:0}

The comment, whitespace, the final semicolon and the unit on zero are removed, and #ffffff is shortened to #fff.

How much does it save?

Typical hand-written CSS shrinks by 15 to 30% with minification. After gzip or Brotli compression, which your server should also enable, the additional gain is smaller but still worthwhile on large stylesheets.

Best practices

• Keep the readable source in version control and minify only for production.
• In real projects, let your build tool handle it: Vite, webpack and Parcel use tools such as esbuild, Lightning CSS or cssnano.
• Generate source maps so you can still debug minified CSS in browser developer tools.
• Removing unused CSS, for example with PurgeCSS or Tailwind's built-in purge, usually saves far more than minification alone.