What is CSS Minifier?

CSS Minifier compresses your CSS by removing whitespace, comments, and redundant syntax. Smaller files download faster and lift your PageSpeed scores.

Under the hood the minifier runs the CSSO algorithm, which goes beyond stripping whitespace. It merges adjacent rules with the same selector, drops shorthand redundancies (margin: 10px 10px 10px 10px becomes margin: 10px), removes unused vendor prefixes you no longer need, and shortens hex colours from six digits to three where possible.

How to use

1. Paste your CSS into the input area, upload a .css file, or load a stylesheet straight from a URL.
2. Click minify to compress — the tool removes comments, whitespace, and shortens values.
3. Copy the minified output or download it as a .css file. Check the compression ratio shown.

When to use

• Shipping a production stylesheet for a static site that does not have a build step.
• Comparing two versions of a stylesheet to see how much hand-written CSS bloat is hiding.
• Squeezing a final byte budget when inlining critical CSS into the head of an HTML document.

Result

A 24KB stylesheet with comments and formatting minifies to 16KB — a 33% reduction that shaves 50ms off load time on 3G connections.

FAQ

Does minified CSS render any differently than the original?

Browsers parse minified CSS identically to formatted CSS. The cascade, specificity, and computed styles stay the same. The only visible change is that the file is smaller on disk and over the wire.

Should I gzip the output too?

Yes — gzip on top of minification reduces size by another 60 to 80 percent. Most CDNs gzip automatically. Minifying first still helps because gzip compresses repetitive patterns, and minified CSS has more of those.

Will minification break my source maps?

This tool does not generate source maps because it works on a single string of CSS, not on a build graph. If you need maps, run a build tool like esbuild or Vite that emits the .css.map alongside the minified output.

Why does my minified file still contain some whitespace?

CSS keeps spaces inside string values, between selector parts (.a .b is different from .a.b), and inside calc() expressions. The minifier removes whitespace that is not semantically required and leaves the rest alone.

Is it safe to minify CSS that uses custom properties (CSS variables)?

Yes. Custom property names and values stay intact. The minifier only collapses formatting around them. Variables like --brand-color survive with the exact characters you wrote, so they keep working in var() calls.

Related Tools