How to use the CSS Minifier
- 1. Paste your CSSPaste a stylesheet or a few rules.
- 2. Choose optionsKeep /*! licence */ comments, shorten colours, drop leading zeros, remove empty rules.
- 3. MinifyCopy the result or download style.min.css, and see how much you saved.
What the minifier changes
The minifier reads your CSS as tokens, the way a browser does, rather than with search-and-replace. That lets it remove comments and whitespace without touching anything inside strings, url() or the spaces that calc() needs around + and −. It also turns #ffffff into #fff, 0.5rem into .5rem, drops the last semicolon in each block and removes empty rules. It does not reorder or merge rules, because that can change which rule wins. Your code is processed in your browser and never uploaded.
We checked it on more than 30 real stylesheets from our own tool pages: in every case Chromium read the minified file as exactly the same set of rules as the original.
Worked example
The sample stylesheet has a commented rule for .card, a hover rule with uneven spacing, an empty .empty { } rule and a media query with calc(50% - 1rem). Minified, it goes from 313 B to 215 B, 31.3% smaller. #ffffff becomes #fff, rgba(0, 0, 0, 0.15) becomes rgba(0,0,0,.15), the empty rule disappears and the calc() spaces stay.
Good to know
- Savings are largest on hand-written, commented CSS; framework builds are often already compact.
- Your server's gzip or Brotli compression stacks on top of minification.
- Keep the original file for editing; minified CSS is for production only.
Frequently asked questions
Can minifying break my CSS?
It shouldn't: values, selectors and rule order are kept, and the test set showed identical results. Check the page once after deploying, as with any build step.
Does it support modern CSS?
Custom properties, @media and @supports are handled. Newer features such as nesting, @layer and @container are kept as written apart from whitespace, but they weren't part of our test set, so check the page after minifying.
Is the CSS minifier free?
Yes. You can open the CSS minifier, paste code and change every setting without signing up. When you minify CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.