CSS Minifier & Beautifier
Compress CSS to cut file size or reformat minified code for readability. Runs entirely in your browser — nothing is sent to a server.
Why Minify CSS?
Minification removes whitespace, comments, and redundant characters — reducing file size by 20–40% typically. Smaller CSS files load faster, improving Core Web Vitals scores like LCP and FCP.
For production builds, use a pipeline tool like Vite, esbuild, or PostCSS with cssnano. This tool is useful for quick ad-hoc minification when you don't have a build pipeline available.
What Gets Removed
- Comments —
/* ... */blocks stripped entirely - Whitespace — spaces, tabs, and newlines collapsed to one
- Space around delimiters — before/after
{ } ; : , - Unnecessary space — after colons in property declarations
Beautify vs Format
Beautifying reverses minification — it adds indentation and line breaks to make dense CSS human-readable again. Useful when debugging a minified stylesheet from production or a third-party library.
For full CSS formatting with vendor-prefix handling, use Prettier with the CSS plugin in your editor or CI pipeline.
Frequently Asked Questions
Does minification change how the CSS works?
No. Minification only removes insignificant whitespace and comments. The browser parses the result identically — the rendered output is bit-for-bit the same.
Why doesn't this handle SCSS or Less?
SCSS and Less are preprocessor languages — they need compilation to plain CSS first. Run sass --style compressed or lessc --clean-css to compile and minify in one step.
Is this tool lossless?
Yes for well-formed CSS. The tool does not restructure rules, combine selectors, or remove unused declarations — only whitespace and comments are removed.
What about source maps?
This browser-based tool does not generate source maps. For source-map support, use Vite or webpack which can emit a .css.map file alongside the minified output.