CSS Minifier
Shrink a stylesheet for production. Beyond stripping whitespace, values are shortened and, if you allow it, duplicate and overridden rules are merged.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Minifier
- Paste your CSS or open a .css file.
- Leave Restructure rules on for the best compression, or turn it off to keep rule order exactly as written.
- Select Minify CSS.
- Review the saving and copy or download the minified stylesheet.
CSS Minifier features
Whitespace and comment removal
All formatting that browsers ignore is stripped.
Value shortening
#ffffff becomes #fff, 0px becomes 0, and redundant units and zeros are dropped.
Structural optimisation
Identical selectors and declarations are merged and overridden properties removed.
Licence comments kept
Comments beginning with /*! are preserved by default.
Size report
See original size, minified size and percentage saved.
In-browser
Your stylesheet is not uploaded.
When to use CSS Minifier
- Preparing a hand-written stylesheet for a production site.
- Reducing the size of critical CSS inlined in the page head.
- Compressing styles for an HTML email or embedded widget.
- Checking how much a stylesheet could be reduced.
CSS Minifier FAQ
What does Restructure rules do?
It lets the minifier merge rules with the same selector or the same declarations and remove declarations that are overridden later. This saves more bytes but changes the order of some rules. It is safe for well-formed CSS; turn it off if your styles rely on unusual ordering or hacks.
How much smaller will my CSS be?
Whitespace removal alone usually saves 15–30%. Restructuring adds a few percent more, depending on how much repetition the stylesheet contains.
Can I reverse minification?
You can re-indent the result with the CSS Formatter, but comments and the original grouping are gone. Always keep your source file.
Does it work with SCSS or LESS?
No. Minify the compiled CSS. Preprocessor syntax is not valid CSS and may be dropped or cause an error.
Does minified CSS run faster?
It downloads and parses slightly faster because there are fewer bytes. Rendering performance is the same.
Two levels of CSS optimisation
The first level is purely textual: remove comments, line breaks and spaces, drop the final semicolon in each block, and write values in their shortest equivalent form. This is completely safe because it does not change what any rule says.
The second level is structural. The optimiser analyses the stylesheet as a whole, merges blocks that share a selector, combines selectors that share declarations, and deletes properties that are overridden by a later identical selector. It has to reason about the cascade to do this without changing the result, which is why it is offered as an option you can switch off.