What CSS minification is
A stylesheet written for humans contains comments, indentation, line breaks and spaces around braces and colons. A browser ignores all of that. Minifying CSS means stripping that extra text so the file is smaller while the rules stay the same.
This tool does the safe, text-level kind of minification. It removes comments, collapses runs of whitespace, drops the spaces around braces, semicolons, commas and colons in declarations, and removes the final semicolon before a closing brace. It does not merge rules, shorten colors, reorder properties or rewrite selectors.
It understands enough CSS to be careful: text inside quoted strings and inside url(...) is copied exactly as written, the space in a descendant selector such as div :hover is kept, and the spaces around + and - inside calc() are preserved, since CSS needs them there.
When it is useful
A smaller stylesheet means fewer bytes to download, which matters for page speed on slow connections. Quick cases include inlining a small block of CSS into an HTML email or a page template, shrinking a snippet for an embed, or checking roughly how much of a file is comments and spacing.
For a real project, use the minification built into your build pipeline as well, since it runs automatically on every release and can optimize further. If you are tuning colors in a stylesheet first, the Color Converter can help you switch between formats.
How to minify CSS with this tool
- Paste your CSS into the box labeled CSS. A small example with a content string is already there.
- The Minified box updates as you type. Its label shows the size before and after, and the percentage saved.
- Click Copy to copy the compact CSS. There are no options to set.
The processing is done in your browser and the stylesheet is not uploaded. The tool does not validate your CSS, so invalid CSS is simply compacted as text.
What it leaves alone, and what it does not do
Left exactly as you wrote them: quoted strings (for example content: "New item" keeps both spaces), unquoted url(...) addresses including data URIs, and comments that start with /*! (usually license notices). Other comments are removed.
Not done: renaming, merging duplicate rules, removing unused CSS, shortening values like #ffffff to #fff, or reordering anything. That is why the savings are modest compared with a full optimizer, but the behavior is predictable.
Always test the minified CSS before shipping it, and keep your readable original as the file you edit. A build-step tool is still the right choice for a production site.