CSS Minifier
Minify CSS to reduce size and remove extra whitespace. Paste your styles, get compact output instantly, then copy it for production use.
CSS Minifier
SIMILAR TOOLS
What this does
So your stylesheet is ready and now you want it small for production. This minifies it. Paste your CSS, hit Minify, and you get a compact version with the spacing gone and the styles squeezed down, ready to ship.
How to use it
- Paste your CSS into the box.
- Hit Minify.
- Copy the minified stylesheet with the Copy button.
How it works
The work is done by CSSO, a CSS optimizer. It does more than pull out spaces and line breaks. It also shortens values where it safely can, turning something like #ff0000 into red, and it restructures your rules, merging duplicates and dropping declarations that are overridden later, so the file ends up smaller than whitespace removal alone would manage. The whole thing happens in your browser, so your stylesheet never leaves your machine.
More than just removing spaces
This is the part that sets CSS minification apart from simply stripping spaces. Because CSSO understands the structure of your CSS, it can notice that two selectors set the same thing, or that a property gets overwritten further down, and tidy that away. Every one of these changes is meant to keep the result looking identical in the browser while shaving off bytes, so your visitors get a smaller download and a faster page.
As always with minified output, it is not meant for editing. Keep your readable source for working on, and minify a copy when you build for production.
Questions people ask
Does minifying change how my CSS looks on the page?
No, that is the whole idea. CSSO makes the file smaller while keeping the result the same in the browser, so your design is unchanged.
Does it only remove whitespace?
No. As well as stripping spaces, it shortens values where it can and merges or removes redundant rules, which makes the output smaller than whitespace removal alone.
Can I edit the minified CSS?
You can, but it is not pleasant to work with. Keep your original, readable stylesheet for editing and use the minified version for production.
Is my CSS uploaded?
No. It all runs in your browser, so nothing you paste is sent away.
References
- CSSO. CSS minifier with structural optimizations. https://github.com/css/csso
- World Wide Web Consortium. CSS Syntax Module Level 3. https://www.w3.org/TR/css-syntax-3/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.