How to use the CSS minifier

1Paste the stylesheet into the CSS box, or press Example.
2Keep Merge and restructure rules ticked for the smallest output; untick it for whitespace-and-value minification only.
3Press Minify CSS. The footer shows the percentage saved and the gzipped sizes.
4Press Copy, or Download to save styles.min.css.

Example

Input

/* buttons */
.btn {
  color: #ff0000;
  margin: 0px 0px 0px 0px;
}

.btn {
  padding: 10px;
}

Output

.btn{color:red;margin:0;padding:10px}

Saved 61% (95 B → 37 B); gzipped 89 B → 57 B. #ff0000 became red, the four 0px values became 0, and the two .btn rules were merged.

What CSS minification removes

Comments, except /*! … */ license comments when Keep /*! license comments */ is ticked.
Whitespace and the last semicolon in each rule.
Longer forms of values: #ff0000 → red, #ffffff → #fff, 0px → 0, 0.5em → .5em, margin: 0 0 0 0 → margin: 0.
Empty rules and duplicate declarations inside one rule.

None of this changes how the page looks. The result is still standard CSS that every browser reads the same way as the original.

Safe vs aggressive optimizations

Merge and restructure rules goes further: it merges rules with the same selector, joins selectors with identical declarations (.a{color:red}.b{color:red} → .a,.b{color:red}) and removes declarations that a later rule overrides. CSSO only does this when it can prove the cascade result is the same within the stylesheet you pasted.

It can't see other stylesheets. If your page loads base.css and theme.css and relies on their order, restructuring one of them on its own is still safe, but merging them into one file first gives the optimizer the full picture. Untick the option if you want output that maps line by line to your source.

Measuring savings

The footer shows two comparisons. The first is the raw file size. The second is the gzipped size, which is closer to what a visitor downloads, because servers compress CSS before sending it. Comments and indentation compress well, so the gzip saving is smaller than the raw saving.

For real-world impact, check how big your CSS is relative to the whole page with the page size checker. On a page with 2 MB of images, saving 4 KB of CSS matters less than making that CSS non-blocking.

Minifying in your build

For a site you build regularly, minify as part of the build so the source stays readable: Vite and Next.js minify CSS in production builds by default (with esbuild or Lightning CSS), and PostCSS users can add cssnano. This page is useful for one-off files, CSS for a CMS theme, or checking how much a stylesheet would shrink before changing your pipeline. To read a minified file, use the CSS formatter.

Is my text private?

This tool runs entirely in your browser. Your text is not uploaded to our servers.

Sources

Questions about the CSS minifier

Does minifying CSS improve page speed?

A little. CSS blocks rendering, so smaller files help first paint, but with compression enabled the transfer saving is often a few kilobytes. Removing unused CSS usually saves far more.

Will it merge duplicate rules?

Yes, with Merge and restructure rules ticked: identical selectors are merged and selectors sharing the same declarations are grouped.

Is minified CSS still valid?

Yes. It is standard CSS without the optional whitespace and comments. Browsers and validators read it the same way.

CSS Minifier