CSS Minifier

What is the CSS Minifier?

The CSS Minifier strips comments, whitespace, and other non-essential characters from a stylesheet to reduce its size, and can expand minified CSS back into a readable, indented form.

CSS is whitespace-insensitive between tokens, so the newlines and indentation that make a stylesheet readable contribute nothing to how it is interpreted. Removing them yields a smaller file that renders identically.

Typical savings are between 10% and 30% before compression. Because stylesheets are render-blocking, the browser will not paint until CSS has loaded and parsed, reducing their size has a direct effect on how quickly a page becomes visible.

Minification is safe precisely because it only removes characters the parser ignores. It does not rename classes, reorder declarations, or merge rules, so the cascade is unaffected.

How to use the CSS Minifier

1. Paste your CSS. Drop in a full stylesheet or a fragment.
2. Click Minify. Comments and insignificant whitespace are removed, producing a compact stylesheet.
3. Or click Beautify. This reverses the process, restoring line breaks and indentation so a minified file becomes readable.
4. Check the size reduction. The before and after sizes show how much you saved.

Worked examples

/* Card component */
.card {
  display: flex;
  padding: 16px;
  border-radius: 8px;
}

.card{display:flex;padding:16px;border-radius:8px}

.btn{color:#fff;background:#06c}.btn:hover{background:#05a}

.btn {
  color: #fff;
  background: #06c;
}
.btn:hover {
  background: #05a;
}

Common use cases

• Reducing page weight. Smaller render-blocking stylesheets mean the browser can paint sooner.
• Preparing CSS for inlining. Critical CSS inlined into the head should be minified, since it is transmitted with every HTML response.
• Reading a third-party stylesheet. Beautifying a minified library stylesheet is the only practical way to understand or override it.
• Sites without a build pipeline. Where there is no bundler, minifying by hand before upload is a straightforward optimisation.

Features and limitations

• Minifies and beautifies from the same interface.
• Removes comments, redundant whitespace, and the trailing semicolon before a closing brace.
• Preserves the order of declarations, so the cascade is unchanged.
• Keeps strings and url() values intact, including any whitespace inside them.
• It does not rename selectors, merge duplicate rules, or remove unused CSS, those require a build tool that can see your markup.

Frequently asked questions