CSS Minifier Compress & Minify CSS Online Free
Paste your CSS or upload a file to instantly strip comments, whitespace, and redundant tokens. See the exact byte savings, copy the output, or download the minified file, all in your browser.
How this CSS minifier strips bytes without breaking your stylesheet
Minifying CSS safely is mostly about sequencing. Strip comments before you collapse whitespace, or a stray /* inside what used to be a string gets mangled. Shorten hex colors before you touch anything else, or a color inside a quoted content value gets corrupted. This tool runs its twelve cleanup passes in a specific order, and protects string literals and important comments before any of them run, so the parts of your CSS that must stay exactly as written actually do.
The whole process is a sequence of regular expression passes over plain text, run entirely in your browser. No stylesheet content is uploaded anywhere; the file size comparison is computed locally with TextEncoder.
Protecting strings and important comments first
Before any stripping happens, the tool scans for quoted strings, like the value inside content: "→", and swaps each one for a short placeholder token. If you check the box to keep /*! ... */ banner comments (the convention for license headers that must survive minification), those get the same placeholder treatment. Only after every string and preserved comment is safely tokenized out does the destructive cleanup begin.
/(["'])(?:(?!\1)[^\\]|\\.)*?\1/g and, if enabled, /*! ... */ banner comments are replaced with null-byte placeholder tokens and stashed in an array.
/* ... */ block comment is removed outright.
{ } : ; , > ~ + are removed entirely, since none of them are meaningful in CSS syntax.
0px becomes 0), and six-digit hex colors with repeated digit pairs shorten to three digits (#ffffff becomes #fff).
Why calc() gets special treatment
Structural whitespace removal is fine everywhere except inside calc(), where calc(100% -20px) and calc(100% - 20px) parse completely differently: the first is a single negative value, the second is a subtraction. After the general whitespace collapse runs, the minifier re-scans specifically for calc(...) blocks and re-inserts a single space around each + and - operator inside them, undoing its own aggressive spacing rule in exactly the one place it would break math.
| Pass | Removes / changes |
|---|---|
| Comments | All /* ... */ blocks, except preserved /*! banners |
| Whitespace | Line breaks and repeated spaces collapse to one space, then structural spacing is removed entirely |
| Trailing semicolons | ;} becomes } |
| Empty rules | Selectors with no declarations, like .unused{}, are removed |
| Zero units | 0px, 0em, 0%, etc. shorten to 0 |
| Hex colors | Six-digit repeated-pair colors shorten to three digits |
Live stats panel
Original and minified byte counts are measured with TextEncoder, which counts actual UTF-8 bytes rather than JavaScript string length, so the percentage saved is accurate even for stylesheets containing non-ASCII characters.
Auto-run on paste
Input under 200,000 characters minifies automatically as you type or paste, with the size cutoff there specifically to avoid freezing the tab on pathologically large stylesheets.
Build tooling and CSS specs
- CSS Syntax Module Level 3 is the W3C specification defining token boundaries, comments, and whitespace rules this minifier respects.
- clean-css is the Node.js library most build tools use for production-grade CSS minification with deeper structural optimization than a regex pass.
- cssnano is a PostCSS-based minifier that operates on a real parsed AST rather than text, catching merges like the
marginshorthand case above. - MDN: calc() explains why whitespace around
+and-is required inside the function.
When minifying is actually worth it
Shrinking a stylesheet before deploying to production to cut page load time, cleaning up CSS pasted from a design tool export full of unnecessary whitespace and comments, preparing a compact CSS payload to inline in an email template’s <style> block, and checking exactly how much a given file benefits from minification before wiring an automated build step around it.
Questions About the CSS Minifier
CSS minification is the process of removing all characters from a stylesheet that are not necessary for the browser to interpret the styles correctly. This includes comments, whitespace, newlines, and redundant tokens like trailing semicolons before closing braces. The resulting file is functionally identical to the original but smaller in bytes, which speeds up network transfer and page load.
No, when done correctly. This tool only removes characters the browser ignores (whitespace, comments) and applies safe transformations like shortening hex colors and removing zero units. String values inside CSS (like content: “My text”) are preserved intact. The minified output is functionally equivalent to the original. Always test your minified CSS in the browser before deploying to production.
Important comments start with /*! (note the exclamation mark). They are used to preserve license notices, author information, and copyright statements in minified files. Many open source CSS libraries require that their license comment remain in the file even after minification. This tool keeps important comments by default, but you can uncheck the option to strip them too.
It depends on how much whitespace and commenting your source CSS contains. Most real world stylesheets see 15 to 40 percent size reduction from minification alone. Heavily commented or indented CSS (like Sass output) can see reductions of 30 to 50 percent. Combining minification with gzip compression (applied by the web server) typically reduces transfer size by 70 to 80 percent compared to the original uncompressed file.
This tool works on plain CSS output, the compiled result of Sass, LESS, or Stylus. Your build tool (webpack, Vite, Parcel, Gulp) should compile the Sass or LESS to CSS first, then you can paste the compiled CSS here to minify it. Alternatively, configure your build tool to minify CSS automatically during the production build step using plugins like cssnano or postcss csso.
Yes. CSS custom properties (variables), CSS grid, flexbox, animations, @keyframes, @media queries, calc(), clamp(), and other modern CSS syntax all minify correctly. The tool treats CSS as text and removes structural whitespace without interpreting the semantic meaning of values, so modern CSS features pass through without modification.
Only in production. During development, you want readable CSS with source maps so you can debug styles in browser DevTools. Minify CSS as a build step that runs when you deploy to staging or production. Tools like Vite, webpack, and Parcel handle this automatically when you run a production build. Use this online minifier for quick one off minification without a build pipeline setup.
No. All minification runs in your browser using JavaScript. Your CSS code never leaves your machine. File uploads are read by your browser’s FileReader API and processed locally, nothing is transmitted to any server. This makes it safe to use with proprietary stylesheets or internal projects.
From the blog
Deep dives on the things these tools touch
Minification, UUID collisions, diffing API responses, and the other questions that come up around this toolset.
