Minified CSS is unreadable — a single line of selectors and declarations with no whitespace. This CSS minifier and beautifier compresses your CSS for production (removing comments, whitespace, and redundant declarations) or reformats minified CSS into readable, indented code for debugging. Everything runs in your browser.

CSS minification removes every byte that doesn't change how the browser renders the page: whitespace, newlines, comments, and often redundant semicolons. For a typical stylesheet, minification reduces file size by 20–40%, which directly improves page load time and Core Web Vitals scores — especially on mobile connections. The beautifier does the reverse: takes compressed CSS from a CDN, a build artifact, or a minified third-party library and reformats it so you can read and debug it.

If you're working with Tailwind CSS, note that v4 changed how you configure and import styles — if your project is still on v3, our Tailwind v3 to v4 migration tool converts your tailwind.config.js to the new @theme CSS syntax so you can upgrade without rewriting your configuration by hand.

Tips

Minify CSS in your build pipeline (Vite, webpack, esbuild) rather than manually — this tool is for one-off compression or debugging.
Comments starting with /*! are preserved during minification — use them for license headers you need to keep.
CSS custom properties (--var: value) are preserved as-is; minification doesn't affect runtime values.
For large stylesheets, check for unused CSS with browser DevTools Coverage tab before minifying — dead code doesn't need to ship at all.