CSS Formatter
Format CSS with consistent indentation and spacing, or minify it for production.
How to use the CSS Formatter
- 1Paste your stylesheet.
- 2Press Format to expand it, or Minify to compress it.
- 3Choose indentation and whether each selector goes on its own line.
- 4Copy or download the result.
How it works
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.