CSS Minifier Online

Compress and minify CSS instantly. Remove comments, whitespace, and redundant characters to reduce file size.

Input CSS

Output

Why Minify CSS?

CSS minification removes every byte that isn't semantically necessary: comments, whitespace, newlines, and redundant semicolons. The result is functionally identical CSS that is often 20–50% smaller. For a typical production stylesheet of 100 KB, that saves 20–50 KB on every page load — with zero code changes and zero risk.

Smaller files transfer faster, parse faster, and render faster. For users on mobile connections or older devices, the difference is immediately felt as a snappier page.

How CSS Minification Works

Remove comments — /* ... */ blocks are stripped entirely. They're for humans, not browsers.
Collapse whitespace — Multiple spaces, tabs, and newlines between tokens become a single space or are eliminated.
Remove last semicolons — The trailing ; before a closing } is optional in CSS.
Collapse spaces around operators — Spaces around :, {, }, , are removed.

CSS Minification vs. Gzip Compression

These two optimizations are complementary, not alternatives. Gzip compression works by finding repeated byte sequences in the file — but it operates on whatever bytes you send. Minification first reduces those bytes, giving gzip a smaller baseline to compress further. The combination typically yields the smallest possible transfer size.

As a rule of thumb: always minify, then let your CDN or server apply gzip/Brotli on top.

Impact on Core Web Vitals

CSS is render-blocking by default. The browser must download, parse, and apply all stylesheets before it can render a page. This directly affects First Contentful Paint (FCP) and Largest Contentful Paint (LCP) — two of Google's Core Web Vitals.

Minifying your CSS reduces the render-blocking time, which can meaningfully improve your Lighthouse score and real-world user experience. Even a 50 ms improvement in FCP correlates with measurable improvements in bounce rate and conversion.

Frequently Asked Questions

Is minified CSS safe to use in production?

Yes. Minification only removes syntactically insignificant characters. The browser parses minified CSS identically to the original. All selectors, properties, and values are preserved exactly.

Can I reverse minification?

Not perfectly — comments and original formatting are lost. Use the Beautify button to re-indent minified CSS into a readable form, but original author comments won't be recovered. Always keep your original source files under version control.

Should I minify CSS manually or use a build tool?

For production projects, integrate minification into your build pipeline (webpack, Vite, Parcel all do this automatically). Use this online tool for quick one-off tasks, debugging, or when you don't have a build setup.

Does minification affect CSS specificity or cascade order?

No. Minification does not reorder rules or change selectors. Specificity and cascade order are fully preserved.

How much size reduction can I expect?

Typical savings are 15–40% depending on how much whitespace and how many comments exist in the original file. Well-commented, human-written CSS often achieves 30%+ savings.