CSS Formatter

1. 1Paste your stylesheet.
2. 2Press Format to expand it, or Minify to compress it.
3. 3Choose indentation and whether each selector goes on its own line.
4. 4Copy or download the result.

The formatter walks the stylesheet character by character, tracking brace depth so nested structures indent correctly. That handles media queries, supports queries, keyframes and native CSS nesting, all of which put rules inside rules.

Strings, url() values and comments are tracked as their own states, so a semicolon inside a url() or a brace inside a string does not confuse the depth counter — a common failure in naive formatters.

Minifying removes comments and unnecessary whitespace, collapses the space around braces, colons and semicolons, and drops the final semicolon in each block. It deliberately stops short of rewriting values or merging rules, since those transformations can change behaviour in edge cases.

Everything runs in this page. Nothing you paste is transmitted, logged or stored, which is what makes it safe to drop a production payload in here while you are debugging.

• Put each selector on its own line for long selector lists; it makes diffs easier to read.
• Keep the formatted stylesheet as your source and minify only for production.
• Minifying here never rewrites values or merges rules, so it cannot change how the styles behave.
• Format a stylesheet copied from browser developer tools to make it readable again.

• Why formatting or minifying HTML changed how the page looks
• Why your CSS isn’t being applied: a checklist