CSS Minifier & Beautifier

CSS minification removes characters that browsers ignore — whitespace, tabs, newlines, and comments — without changing how your stylesheet applies to the page. The browser parses minified CSS identically to formatted CSS; the only difference is fewer bytes traveling over the network.

Real-world minification typically saves 30–70% of the original file size, depending on how many comments and how much indentation the source contains. A stylesheet with generous spacing and block comments at the top of each component will compress more than one already written without whitespace.

Production build tools — Webpack, Vite, Parcel, and Rollup — minify CSS automatically as part of their output pipeline. This tool is useful when working directly with .css files outside a bundler, when you receive a third-party stylesheet you want to re-serve, or when you need to check how much a specific file can be reduced.

The beautifier is the reverse operation — it takes minified or poorly-formatted CSS and adds consistent 2-space indentation, one declaration per line, and a blank line between rule blocks. The output is the same CSS, just formatted for human readability.

Use the beautifier when you need to:

• • Debug a third-party stylesheet linked from a CDN (inspect its rules without reading one long line).
• • Review a pull request where minified CSS was accidentally committed instead of source.
• • Understand a vendor stylesheet when the original source files are not available.
• • Onboard onto a legacy project that has no build pipeline and ships raw minified files.

These are two separate, complementary optimisations that work at different stages:

• Minification is a one-time transform you apply to the source file before deploying it. It permanently removes redundant characters. The result is stored on disk.
• Gzip / Brotli is transport compression applied by your server or CDN on every request. The browser decompresses it automatically; you do not need to do anything client-side.

Always minify first, then serve with gzip. Minified files compress a further 10–15% better than unminified ones because shorter repeated patterns compress more efficiently. A 10 KB CSS file minified to 4 KB, then gzipped, can reach under 1.5 KB on the wire.