CSS Minifier

About This Tool

Minify your CSS code in one step with this free tool. Paste unformatted or readable CSS into the editor and get a compressed version with comments stripped, whitespace collapsed, and empty rules removed. The output is production-ready CSS that loads faster because it contains fewer bytes for the browser to download and parse. Your code never leaves your device, so proprietary stylesheets stay private. Copy the minified output to your clipboard or download it as a .min.css file. Size statistics show the original and minified file sizes along with the exact percentage reduction, helping you quantify the performance improvement before deploying. No account, no signup, no data collection.

What CSS Minification Does

CSS minification reduces file size without changing how the stylesheet behaves. The process removes characters that browsers do not need to interpret your styles correctly:

Comments: Everything between /* and */ is removed. Comments are helpful during development but add bytes in production.
Whitespace: Extra spaces, tabs, newlines, and carriage returns are collapsed. Spaces around curly braces, colons, semicolons, and commas are eliminated.
Trailing semicolons: The last semicolon before a closing brace is unnecessary and gets removed.
Empty rules: Selectors with no declarations (like .unused { }) are deleted entirely.

The result is a single line (or very compact block) of CSS that renders identically in every browser but takes less bandwidth to transfer.

Why Minified CSS Improves Performance

Every kilobyte saved in your CSS file directly reduces page load time. Here is how each optimization helps:

Smaller download size means less data transferred over the network. On slow mobile connections, even a 5 KB reduction can shave 50-100ms off load time.
Faster parsing by the browser CSS engine. Fewer characters and simpler structure mean the parser finishes sooner.
Better compression with gzip or Brotli. Minified CSS compresses more efficiently because redundant whitespace patterns are already removed.
Improved Core Web Vitals. Smaller CSS files contribute to faster First Contentful Paint (FCP) and Largest Contentful Paint (LCP) scores, both critical Google ranking factors.

A typical CSS file shrinks by 15-40% after minification, depending on how many comments and how much formatting the original contains.

Minification vs. Uglification vs. Bundling

These terms are related but different:

Minification removes unnecessary characters (whitespace, comments). The code remains valid and functional. This tool performs minification.
Uglification goes further by renaming variables and restructuring code. This applies to programming languages like JavaScript but not to CSS, because CSS class names are referenced in HTML and cannot be renamed in isolation.
Bundling combines multiple CSS files into one file to reduce HTTP requests. Bundling and minification are complementary: bundle your stylesheets first, then minify the combined file for maximum savings.

For CSS, minification is the primary optimization. Combine it with gzip compression on your server for the best results. Most production deployments achieve 80-90% total size reduction when minification and compression work together.

Best Practices for Production CSS

Minification is one part of an efficient CSS delivery strategy:

Keep source files readable. Write well-commented, formatted CSS during development. Minify only for production builds.
Use source maps. Generate .map files so browser dev tools can display the original formatted code even when serving minified CSS.
Remove unused CSS. Tools like PurgeCSS or the coverage panel in browser dev tools identify selectors that your HTML never references. Removing dead CSS before minification yields the largest savings.
Cache aggressively. Serve minified CSS with long cache headers and use content hashes in file names (like styles.a1b2c3.min.css) so browsers cache the file until you deploy a new version.
Inline critical CSS. Extract the CSS needed for above-the-fold content and inline it in the HTML head. Load the remaining CSS asynchronously.

Frequently Asked Questions

Does minification change how my CSS looks in the browser?

No. Minification only removes characters that browsers ignore: comments, extra whitespace, and redundant semicolons. The visual rendering of your page stays exactly the same. Every rule, property, and value is preserved.

How much size reduction can I expect?

Typical savings range from 15% to 40%, depending on the amount of commenting and formatting in your original file. Heavily commented files with generous whitespace see the largest reductions. Files that are already compact may only shrink by 10-15%.

Can I minify CSS that uses media queries and @keyframes?

Yes. This minifier handles all standard CSS syntax including media queries, @keyframes, @font-face, @import, and custom properties. The whitespace and comment removal operates on the raw text level and does not alter CSS structure or selectors.

Should I use a CSS minifier or let my build tool do it?

Both approaches work. Build tools like Webpack, Vite, and PostCSS have CSS minification plugins (cssnano, clean-css) that run automatically during your build pipeline. This online tool is useful for quick, one-off minification when you do not have a build system set up, or when you need to minify a standalone CSS file for a static site.

Is it safe to minify third-party CSS libraries?

Yes, but check if the library already provides a minified version first. Most popular libraries (Bootstrap, Tailwind, Normalize.css) ship with .min.css files. Running an already-minified file through this tool will not cause issues, but the savings will be negligible since it is already compressed.

CSS Input