How to minify CSS safely

How it works

The minifier strips /* comments */, collapses runs of whitespace to a single space, removes spaces around structural punctuation such as { } : ; , >, and drops the final semicolon before a closing brace. It does not rename selectors, merge rules or reorder the cascade.

• A conservative minifier: it does not remove unused rules or rewrite values. Always re-test the stylesheet afterwards.

Why it matters

Every kilobyte of render-blocking CSS delays first paint. Minification is the cheapest win available after removing unused rules, and a tool that only touches provably redundant characters can be trusted in a build step without redefining your stylesheet.

A worked example

A rule written as .card { color: red; padding: 10px 20px; } becomes .card{color:red;padding:10px 20px}, saving a few dozen bytes per rule and far more across a real stylesheet with hundreds of declarations.

Common mistakes

• Removing spaces around + and - inside calc(), which the spec requires.
• Minifying SCSS or LESS instead of compiled CSS.
• Skipping the visual check after minifying.

Practical tips

Keep the unminified source in version control and minify as a build output. If you use custom properties with fallbacks, compare the computed styles in DevTools before and after — the cascade is preserved, but a single lost space can change how a value parses.

How to use it

1. Open the tool. Everything runs in your browser tab.
2. Paste or type your input, then choose the action you need.
3. Check the result and copy it with one click.

Open the tool

Common questions