CSS Minifier: How to Reduce CSS File Size

Minifying CSS means removing everything the browser does not need to apply your styles: comments, indentation, line breaks and the spaces around punctuation. The rules behave identically, but the file is smaller, so it downloads and parses faster. How much you save depends on how heavily the file is commented and indented, and our tool shows the exact figure for yours.

What a minifier removes

• Comments such as /* header styles */.
• Whitespace and line breaks between rules and declarations.
• The last semicolon in a declaration block, which is optional.
• Empty rules that contain no declarations.

What it must not change

Not every space is removable. A careless minifier can break a working stylesheet, so these are the cases worth checking in any tool you use:

• Spaces inside calc(). calc(1px + 2px) needs the spaces around + and -. Without them the declaration is invalid and the browser ignores it.
• Descendant selectors. .card :hover (any hovered child) is different from .card:hover (the card itself). The space matters.
• Strings and URLs. Content inside quotes, such as content: "a b", and inside url() must stay exactly as written.

After minifying, open the page and compare it to the original. If a layout shifts, one of the cases above is the usual cause.

How to minify CSS with our tool

1. Open the CSS Minifier.
2. Paste your stylesheet, or click Load Sample to see an example.
3. Click Minify. The tool shows the original size, the minified size and the percentage saved.
4. Copy the result into your build output or deploy folder.

The work happens in your browser, so a private or unreleased stylesheet is never uploaded anywhere.

Minification versus compression

They are different and they stack. Minification rewrites the file to be smaller. Compression (gzip or Brotli) is applied by your server while sending it. A minified file compresses well too, but you get the best result from doing both. If your host already serves gzip or Brotli, minification still helps, just by a smaller margin.

When to minify by hand and when to automate

A pasted-in minifier is ideal for a single stylesheet, a quick fix, an email template or a static site with no build step. For a larger project, let your build tool do it on every release so you never ship an unminified file by accident. Keep the readable source in version control and only minify the output.