CSS Minifier & Beautifier

Paste a stylesheet and get it back either compressed to the smallest safe size or expanded into clean, indented code. The same tool does both directions, so you can minify a stylesheet for production and un-minify a vendor file you need to read — without leaving the page.

How to use it

1. Paste your CSS into the input box, or upload a .css file.
2. Pick a Format:
   • Minify — everything on as few bytes as possible.
   • Minify, but keep line breaks — minified declarations, one rule per line. Useful when you still want to diff the output or read a stack trace against it.
   • Beautify — re-indent and space the stylesheet out. Choose 2 spaces, 4 spaces or tabs.
3. Copy the result, or download it as a .css file.

The output updates as you type. Nothing is submitted anywhere — see the privacy note below.

What minifying actually removes

Comments, and every run of whitespace the CSS grammar cannot possibly need. Declarations become color:red, the last ; before a } is dropped, !important loses its leading space, and selector combinators tighten up (a > b + i becomes a>b+i).

What it deliberately does not touch is just as important:

• Strings stay byte-identical. content: "/* not a comment */" is a string, not a comment, and comes out intact.
• url() values are opaque — including unquoted data: URIs stuffed with ; and , that a naive regex minifier would slice in half.
• calc() keeps its spaces. calc(100% - 10px) is valid; calc(100%-10px) is a syntax error. The spaces around + and - inside a value are load-bearing and are preserved.
• Descendant combinators survive. p :first-child (every first child inside a p) is not the same selector as p:first-child (a p that is a first child). The space between them is kept.
• /*! … */ bang comments are kept, which is how licence headers are conventionally marked.

Does it rename classes or rewrite my properties?

No. This is a whitespace-and-comment minifier, not an optimiser. It will not merge duplicate rules, drop empty ones, shorten #ffffff to #fff, or reorder anything. Output is always a stylesheet that behaves exactly like the input — smaller output is never worth silently changing what your CSS does.

How much smaller will my CSS get?

Typically 20–35% on hand-written CSS, mostly from indentation and comments. Already-minified CSS will barely move. Serving the result with gzip or brotli compression gives you far more than minification does, so do both.

Can I un-minify a stylesheet?

Yes — that is what Beautify is for. Paste minified CSS, pick your indent, and you get a readable stylesheet back. Comments that survived the original minification are kept and put on their own lines.

Why did my empty rule stay?

Because removing rules is a structural change, and the tool only does whitespace and comments. .unused {} is harmless; if you want it gone, delete it in your source.

Is my CSS uploaded anywhere?

No. The minifier runs entirely in your browser — your stylesheet is never sent to a server, never logged, and never stored. Uploading a file reads it locally in the page. You can disconnect from the network and the tool still works.