Minify CSS to strip comments and unnecessary whitespace and merge duplicate rules, or beautify it back to one declaration per line. Both directions use real parsers (csso and js-beautify), so comment-looking text inside a content: string, spacing inside calc(), and data: URIs survive intact.
Minify vs. Beautify
Minify strips comments and unnecessary whitespace and safely merges duplicate rules to produce the smallest possible CSS — handy for shrinking a stylesheet before shipping it. Beautify does the reverse: it re-indents everything with one declaration per line so a minified or messy file becomes readable again. Both are powered by real CSS parsers (csso and js-beautify), so tricky content like comment-looking text inside a content: string, spaces inside calc(), and data: URIs are preserved instead of being broken by a naive find-and-replace.
How to use the CSS Minifier
- Paste — paste the CSS you want to minify or beautify into the input box above.
- Choose indentation — pick 2 spaces, 4 spaces, or a tab (this applies only to Beautify output; it has no effect on Minify).
- Run — press the "Minify" or "Beautify" button and it's processed instantly inside your browser.
- Copy — check the size read-out and use the "Copy" button to put the result on your clipboard.
Could minifying change my styles?
No. This tool doesn't blindly find-and-replace text; it uses a real CSS parser (csso) to understand your stylesheet as a syntax tree and then optimize it safely. As a result, comment-looking strings inside content:, meaningful spaces inside calc(), data: URIs, and vendor prefixes are all preserved, so the rendered result doesn't change.
How much smaller does it get?
It depends on the starting point, but human-readable CSS with plenty of comments and indentation typically gets 30–60% smaller. An already-minified file shrinks by much less. When the conversion finishes, the size read-out shows exactly how many bytes and what percentage were saved versus the original. Add gzip/brotli compression on the server and the actual transfer size drops even further.
When should I use Beautify?
Beautify is useful when you need to read or edit CSS that's already been minified to a single line, or a file with messy indentation. It re-lays every declaration out with consistent, one-per-line indentation, which makes debugging a deployed stylesheet or understanding someone else's code much easier. When it's time to ship again, just switch back to Minify.
Is my CSS uploaded anywhere?
No. Both the minifier and beautifier run entirely inside your browser using self-hosted libraries — your CSS is never sent to or stored on any server. After converting, the size read-out shows how many bytes minifying saved, and the Copy button puts the result straight on your clipboard.