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 Works
This CSS minifier applies a multi step pipeline to reduce the size of your stylesheet without changing any of its visual behavior. The process removes block comments, collapses all whitespace to single spaces, strips spaces around structural tokens like braces and semicolons, removes trailing semicolons before closing braces, and shortens zero values by removing unnecessary units.
It also shortens six character hex colors that have repeated pairs (#aabbcc becomes #abc) and collapses redundant semicolons. String values inside your CSS are preserved exactly as is so your content attributes and font face declarations are never corrupted.
For production deployments, CSS minification typically reduces file size by 15 to 40 percent on real world stylesheets. Smaller CSS means faster initial page loads, especially on mobile connections where every byte counts.
What this tool does
How to use it
Paste or upload CSS
Paste your stylesheet into the left panel or click Upload CSS File to load a .css file directly.
Minify
Click Minify CSS. Output appears instantly in the right panel. The tool auto minifies as you type for quick iteration.
Check savings
The stats bar shows original size, minified size, and the exact percentage reduction.
Copy or download
Copy the minified CSS to your clipboard or download it as a .css file ready for production.
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.