CSS Minification: Why and How to Minify Your CSS

Minifying CSS makes your stylesheets smaller so pages load faster. It's a mechanical, lossless change — here's what it does and when to reach for it.

What minification removes

Minifying strips everything a browser doesn't need to render the styles:

• Whitespace, indentation, and line breaks.
• Comments.
• The last semicolon in a rule, and other redundant characters.

The result is functionally identical CSS in far fewer bytes — often 20-50% smaller before compression even kicks in.

Why it matters

CSS blocks rendering: the browser won't paint the page until it has your stylesheets. Smaller CSS downloads faster, which improves load time and Core Web Vitals. Combined with server gzip/Brotli compression, minification compounds the savings.

Minify vs beautify

The same tool usually does both, in opposite directions:

• Minify for production — smallest possible file for shipping.
• Beautify for development or debugging — re-expand minified CSS into readable, indented rules so you can actually work with it.

A common workflow: keep readable source in your project, and minify as a build step. When you only have a minified file (say, from a third party), beautify it to understand it.

Related

The same idea applies to markup — see HTML Minification: Shrink Your HTML for Faster Loads.

Try it

Paste CSS to minify it for production, or beautify minified CSS back into readable form — all in your browser, nothing uploaded.