Developer Tools

CSS Minifier

Minify CSS code for production.

How to Use CSS Minifier

1

Paste your CSS into the minifier box, or load a compiled or hand-written stylesheet file.

2

Choose the optimisation level: safe whitespace stripping, or aggressive with colour and unit shortening.

3

Click the "Process" button to strip comments and rebuild the stylesheet in its smallest safe form.

4

Copy the minified CSS and drop it into your build step or a style block, then check the reported savings.

Features

Two modes so you can pick safe whitespace stripping or aggressive shrinking
Shortens six-digit hex colours to three digits and removes redundant units on zero
Strips comments and the trailing semicolon without altering selectors
Never merges or reorders rules, so specificity and the cascade stay identical
Shows original size, minified size, and the percentage reduction achieved
Free, instant, and processed in the browser with no upload step

Frequently Asked Questions

A full build pipeline usually also merges duplicate rules, renames classes, and may run a framework compiler, all of which this tool intentionally avoids. You get whitespace, comment, and safe shorthand savings only, which is why the percentage is often smaller but the risk of breaking layout is much lower.
No. Class names, IDs, and rule order are preserved exactly, so nothing about the cascade changes. That is deliberate: selector merging and renaming are the two steps most likely to break a site when a minifier gets them wrong.
Yes, for a stylesheet you control, and it is especially safe as a final pass after your own build step. Always eyeball the page in a browser, and be careful with content property strings and data URIs that contain characters the minifier might treat as significant.
It is free, needs no sign-up, and has no practical size cap or watermark. Processing happens locally in your browser, so your stylesheet is never uploaded.

About CSS Minifier

CSS compresses very well, but there is still a lot of redundant weight to remove before the compressor ever sees it. The CSS Minifier strips comments, collapses every run of whitespace down to a single space, removes the final semicolon in each block, and tightens spacing around punctuation in selectors.

An aggressive mode goes further and applies the safe shorthand rewrites that browsers understand: a six-digit hex colour becomes three, 0px becomes 0, and redundant units on zero values are dropped. Values inside quoted strings, URLs, and attribute selectors are left alone, because those bytes are data rather than formatting.

What it deliberately does not do is merge selectors, reorder rules, or rename classes. Merging is powerful but it is also where minifiers break specificity, and renaming requires a matching change in your HTML or JavaScript. The result here is byte-smaller while behaving exactly like the stylesheet you wrote, which makes it safe to drop into a live site.

When to Use This Tool

  • Shrinking a critical CSS file that blocks first paint
  • Compressing a WordPress or Shopify theme stylesheet for production
  • Reducing bandwidth on a site with a large custom design system
  • Comparing stylesheets by their minified size to spot bloat
  • Minifying inline styles before pasting them into a CMS