What does a CSS minifier do?
A stylesheet written for humans has indentation, line breaks, comments and often the same selector or declaration repeated in several places. The browser needs none of that formatting. Minifying CSS removes it and rewrites values in their shortest form, so the file downloads faster and the browser parses it sooner. Since CSS blocks rendering until it is loaded, a lighter stylesheet can help the first paint of the page.
This tool uses CSSO, a minifier that goes beyond removing whitespace. With structural optimisation turned on (the default) it also merges rules with the same selector, joins selectors that share the same declarations and removes declarations that are overridden later. It only does this when the result is equivalent, so the cascade and specificity stay the same. If you prefer a purely mechanical minification, turn it off.
Comments starting with /*! are the usual way to mark license notices. You can choose to keep them so the attribution required by a library or font stays in the minified file. The size before and after and the percentage saved appear after each run.
A typical stylesheet loses a good share of its size with minification alone, and more if it has many comments or repeated rules. The exact figure depends on how the source was written, which is why the tool measures it for your file instead of promising a number. Your CSS is processed in your browser and never uploaded. You get one free try per tool: one file or one pasted text. After that you can still re-process the same text with different options, but new input needs ToolStudio Pro, which gives unlimited use of every tool, several files at once downloaded together in a ZIP, and no ads. You can cancel anytime.
How to minify CSS
- Paste your CSS or drop a .css file.
- Leave structural optimisation on to merge rules, or turn it off for whitespace-only minification.
- Choose whether to keep /*! license comments.
- Run the minifier, check the size saved, then copy or download the result.
When to minify CSS
- Themes and templates for WordPress or other CMSs shipped without a build step.
- Critical CSS you inline in the <head> of a page.
- Stylesheets of static sites and landing pages.
- Cleaning up CSS that grew over the years with repeated selectors.
- CSS for widgets and embeds that load on other sites.
Example of structural optimisation
Input: .a { color: red } .b { color: red } .a { margin: 0 }. Plain minification keeps three rules. With structural optimisation the shared color is merged into a single .a,.b{color:red} rule, and margin:0 stays on .a, as long as the order of the cascade allows it. The gain grows with stylesheets that were edited by many people over time.
Minification and gzip
Server compression (gzip or Brotli) and minification are complementary. Compression shrinks the transfer, minification shrinks what the browser has to read after decompressing. Use both for production CSS.
Frequently Asked Questions
Can minifying CSS break my styles?
Removing whitespace and comments cannot. Structural optimisation only merges rules when the result is equivalent; if you want to be extra careful, turn it off and you get a whitespace-only minification.
Does it support SCSS or Less?
The minifier works on plain CSS. Compile SCSS or Less to CSS first. To format SCSS or Less code, use the CSS formatter.
How do I keep license comments?
Turn on the option to keep /*! comments. Regular comments are removed, those starting with /*! stay.
Is my CSS sent to a server?
No. CSSO runs in your browser and the code stays on your device.
Is it free?
One file or one pasted text is free. You can re-run that same text with other options, but new input needs ToolStudio Pro, which adds unlimited use, several files at once in a ZIP and no ads.