Minified CSS will appear here…
Strip comments, collapse whitespace, shorten hex colours, and remove empty rules — all in a single click, with no account required.
CSS minification strips everything from your stylesheet that a browser does not need to apply
styles — block comments, indentation, blank lines, and unnecessary whitespace around colons,
semicolons, and braces. It also shortens redundant values like 0px to 0
and compresses six-character hex colours like #ffffff to #fff.
The output is byte-for-byte equivalent in terms of rendering; it just weighs less on the wire.
A typical CSS file can shrink by 20–60% through minification alone. Combine that with server-side GZIP or Brotli compression and the transfer size can drop to a fraction of the original. For sites loading multiple stylesheets, these savings compound across every page view.
Every /* ... */ block is stripped out. Comments are purely for developers and add zero value to what the browser renders.
Multiple spaces, tabs, and line breaks are collapsed to the bare minimum. Indentation and blank lines disappear entirely.
Values like 0px, 0em, and 0rem become just 0. The unit after zero is meaningless and the browser knows it.
Colours like #aabbcc are shortened to #abc where possible. This is a guaranteed lossless transform that browsers handle natively.
Selectors with empty declaration blocks like .unused {} are deleted. They contribute to parse time without affecting any element.
After minification you get a breakdown: original size, minified size, bytes saved, percentage reduction, comments removed, and rule count.
CSS in the
blocks first paint. A smaller stylesheet is fetched and parsed faster, which directly improves Time to First Byte and Largest Contentful Paint — both Core Web Vitals Google measures.PageSpeed Insights and Lighthouse both flag oversized CSS files as "Eliminate render-blocking resources." Fixing this audit item can meaningfully move your mobile performance score.
Smaller files have higher cache-hit ratios on CDN edge nodes and compress further with Brotli. Returning visitors load your site from cache faster, reducing server load.
If you are on a bandwidth-metered plan or pay per GB transferred on a cloud provider, shaving 40% off every stylesheet request adds up meaningfully at scale.
Always maintain a human-readable source file and minify at build or deploy time. Editing .min.css directly means your next deploy will overwrite your changes and you will have no readable reference.
Bootstrap, Tailwind, and similar frameworks already ship minified builds. Feeding their source through a second minifier is harmless but wasteful — just use their .min.css distribution.
Minifiers that aggressively rewrite values can occasionally break CSS custom properties (variables) or calc() expressions. Always test in a browser after minifying complex stylesheets.
When you serve minified CSS, browser DevTools will show you a single unreadable line. Generate a .css.map file during your build so errors still point to the original source line.
Some aggressive minifiers remove spaces inside media queries in ways that break older browser parsing. Our tool preserves spaces correctly so @media (max-width: 768px) stays valid.
Paste your CSS above and see how much you can trim in under a second.
Minify CSS Now