CSS Formatter

How to use it

1. Paste your stylesheet into the left panel — a small sample loads so you can try both directions.
2. Click Beautify to get indented rule blocks, one declaration per line and selector { layout.
3. Click Minify to collapse whitespace and remove comments for a production-ready single line.
4. Click Copy to take the result, or edit the input again and re-run either direction.
5. The status line shows output size and how many characters minification saved.

Common use cases

• Reading vendored CSS — turn a minified framework file into something you can actually scan.
• Shipping stylesheets — minify before deploying so pages carry fewer bytes.
• Code review prep — beautify a dump before diffing so changes line up.
• Cleaning generated styles — reformat CSS exported from design tools into a consistent shape.

Why it stays private

The parser is a local string walker: quotes and url() contents are detected character by character and never rewritten. Your stylesheet never leaves the browser, which matters for unreleased designs and client work.

FAQ

Q: What exactly does string-aware mean here? A: Content inside single or double quotes, and inside url(...), is copied verbatim. A semicolon or brace inside a string does not confuse the formatter, so data URIs and font names with spaces survive.

Q: Are comments preserved? A: No. Both directions remove /* ... */ comments, including license headers — re-add the license line manually if the stylesheet requires attribution.

Q: Does it reorder or rename anything? A: Never. Rules and declarations keep their order and spelling; the formatter only moves whitespace and line breaks, so the compiled result is semantically identical.