CSS Minifier & Beautifier
Compress CSS to save bytes, or expand minified CSS back into something readable — with a guarantee that no rule, selector or value is ever altered.
Only whitespace and comments are ever changed. No CSS token is renamed, reordered or removed, so the output cannot behave differently from your input. That also means the size reduction is smaller than tools which rewrite your code — no variable mangling, no dead-code removal — no merged selectors, no collapsed shorthands — and because SQL needs whitespace between tokens, it can only be collapsed, never removed. This formats your source; it does not compile it. Your types are preserved, not stripped.
/*! banner comment is always kept, the usual
convention for a licence header.
Drop a CSS file here
Up to 4 MB · nothing uploaded
{{ error }}
{{ commentWarning }}
Verified — every token preserved
The output was re-tokenized and compared against the input: all {{ tokenCount }} code tokens are identical, in the same order. Only whitespace and comments differ.
Output rejected
The result did not survive the token check, so it was discarded rather than shown to you. This is a bug in the tool, not in your code — please treat the input as unformatted.
Your CSS is tokenized and reformatted entirely in your browser. Nothing you paste or drop is ever uploaded to a server.
What this tool changes, and what it never touches
Minifying removes comments and every byte of whitespace a browser does not need; beautifying does the reverse, putting one declaration per line with consistent indentation. In both directions the rules themselves are left completely alone — every selector, property and value comes out exactly as it went in.
The places a careless CSS minifier goes wrong
Three in particular, all handled here. The spaces around + and -
inside calc() are required by the CSS grammar, so calc(100% - 20px)
never becomes calc(100%-20px). A space before a colon is kept, because
a :hover and a:hover select different things. And the contents of
url() and of custom properties are treated as opaque, so a brace or a
comment-looking sequence inside them is never mistaken for real syntax.
Why the saving is smaller than cssnano's
Because this tool does not merge duplicate selectors, reorder declarations, collapse longhand properties into shorthands, or drop rules it believes are redundant. Each of those changes the stylesheet rather than its formatting, and each can alter what a page looks like if it gets an edge case wrong. The one token this tool does remove is the semicolon before a closing brace, which the CSS specification itself defines as optional.
Working with JSON instead?
Use the JSON Formatter, which validates as well as formats and gives you an interactive tree view.
Frequently asked questions
Will minifying break my CSS?
It should not, by design: this tool only removes or rewrites whitespace and comments, and never touches a selector, property or value. The one exception is the semicolon before a closing brace, which the CSS grammar defines as optional. It deliberately does not merge duplicate selectors, reorder properties or collapse shorthands, because each of those is a change to the code itself rather than to its formatting.
Why is the saving smaller than other minifiers?
Because those tools do more than remove whitespace: they merge rules, reorder and collapse properties, and drop declarations they judge redundant. Those give bigger savings and carry a real chance of changing how a page renders. This tool takes the smaller, safe reduction on purpose.
What is the difference between minifying and beautifying?
Minifying removes every byte of formatting that a browser does not need, producing one long line. Beautifying does the reverse, re-indenting the file with one declaration per line so it can be read and edited. Both leave the actual rules identical.
Does it handle calc(), custom properties and url()?
Yes, and each is a place a naive minifier goes wrong. Spaces around the plus and minus inside calc() are required by the CSS grammar and are kept. Custom property values and url() contents are treated as opaque, so a comment-like or brace-like character inside them is never mistaken for real syntax.
Is my CSS uploaded anywhere?
No. Tokenizing and formatting run entirely in your browser with JavaScript. Nothing is sent to a server, which matters because stylesheets often arrive pasted from a private project.