CSS Beautifier / Minifier

Indent compressed CSS for readability or minify back to one line. @media, nested rules, and comments are all handled.

Input CSS
Output

How to Use

1
Choose mode

Pick "Beautify" (add indentation) or "Minify" (strip whitespace and newlines).

2
Paste CSS

Paste your CSS on the left; the result appears live on the right.

3
Tweak & copy

Pick indent width (2, 4, or tab). Minify mode also offers "strip comments". Copy in one click.

FAQ

Does it indent @media queries?

Yes — @media, @supports, @keyframes, @font-face and other nested at-rules are indented based on brace depth.

How are comments handled?

Beautify keeps and positions comments. Minify removes them by default ("strip comments" toggle on); turning the toggle off keeps them.

What does minify actually do?

1) strip comments, 2) collapse whitespace, 3) remove whitespace around { } : ; ,, 4) drop the last semicolon before }. We avoid value-level optimizations like 0px→0 or #ffffff→#fff to preserve the original exactly.

Does it handle malformed CSS?

It's a tokenizer-based formatter. Missing braces or invalid syntax still produce output, but indent depth may drift. For strict validation use the W3C CSS Validator.

Is anything sent to a server?

No. All conversion runs in your browser; nothing leaves the page.