About the CSS Minifier
This CSS minifier compresses a stylesheet by removing everything the browser's parser does not need. Block comments go first, then runs of whitespace collapse to single spaces, then the spaces surrounding braces, colons, semicolons, commas and the combinators for child, sibling and adjacent selectors are removed entirely. Finally the redundant semicolon before each closing brace is dropped. The result is functionally identical CSS, and you get before and after character counts plus a percentage saved so you can judge the benefit. It runs locally in your browser, which makes it convenient for stylesheets from a client project you would rather not paste into a remote service.
How to use the CSS Minifier
- 1
Paste your stylesheet into the CSS box.
- 2
The minified output appears immediately — there is nothing to configure.
- 3
Check the Savings panel for the before size, after size and percentage removed.
- 4
Copy the result or download it as style.min.css and reference that file from your page.
What people use it for
Shipping a stylesheet without a build step
Static sites, landing pages and WordPress child themes often have no bundler at all. Minifying by hand captures most of the size benefit for none of the tooling.
Inlining critical CSS
Above-the-fold styles placed in a style block in the head sit on the critical rendering path of every page, so every byte there delays first paint.
Fitting styles into a constrained field
Email platforms, ad builders and CMS custom-CSS boxes sometimes cap the character count, and minifying can bring an oversized stylesheet under the limit.
Why minifying cannot change how your CSS behaves
CSS is whitespace-insensitive between tokens. The parser tokenises on braces, colons, semicolons and commas, so a rule written compactly and the same rule written with generous spacing produce identical declarations. Removing whitespace therefore cannot alter specificity, which is computed from the count of ID, class and type selectors and is entirely unaffected by formatting, nor the cascade, which depends on origin, importance, layer, specificity and source order. Source order is preserved exactly here, so a later rule that was overriding an earlier one still does. One real caution: whitespace is significant as the descendant combinator, so a selector with a space between two classes means something different from the two classes joined. This minifier only removes space around the child, general sibling and adjacent sibling combinators, never between two bare selectors. Whitespace inside quoted strings, url values and attribute selectors is also untouched, because those are single tokens to the parser.
What this tool deliberately leaves alone
Full minifiers such as cssnano and Lightning CSS do considerably more than strip whitespace. They shorten colours from six hex digits to three where possible, collapse four identical box values into one, merge duplicate selectors, fold longhand properties into shorthands and normalise zero values by dropping the unit. Each of those transformations is context-sensitive and can go wrong: dropping the unit from a flex-basis is not always safe, and merging rules changes source order in ways that can break an intentional override. This tool sticks to transformations that are provably neutral. It also does not remove unused rules, which requires static analysis of your HTML, templates and JavaScript, and it does not update source maps — if you have one it will point at the wrong lines after minification, so regenerate it as part of your build rather than trusting the old file. Licence banner comments are removed along with everything else.
Tips
- Keep the readable stylesheet in source control and treat the minified file as a build artefact.
- Minified CSS still benefits from gzip or brotli on the server — the two are complementary, not alternatives.
- Re-add any licence banner your dependencies require, since the comment pass removes it.