CSS Minify / Beautify

Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.

How to use it

• Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
• Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
• Handy for quickly reading CSS from a third-party site that only ships a minified version.

Common uses

• Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
• Beautifying minified CSS from a third-party library to read or debug it.
• Estimating how much a CSS file will shrink before setting up an automated build.

Things to keep in mind

Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.

Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.