CSS Formatter
Re-indent CSS so it is readable, or minify it for production. Nested at-rules, comments and quoted values are all handled correctly.
Your data never leaves your browser. This tool runs entirely on your device.
What the formatter does
Each declaration goes on its own line, indented by nesting depth, with a space after every colon and a semicolon after every declaration including the last. Selector lists are broken one per line so long lists stay readable.
Nested at-rules such as media and supports queries increase the indent, so the structure of a responsive stylesheet is visible at a glance.
What it will not break
Semicolons and colons inside quoted strings are left alone, so content: "a;b" survives. So does everything inside url(), which matters for data URIs — those contain both colons and semicolons and would otherwise be split apart.
Comments are preserved and placed on their own line.
Minifying
Minifying strips comments, collapses whitespace and removes the final semicolon in each block. The result is functionally identical CSS at roughly half the size.
As with JSON, gzip already removes most of this redundancy over the wire, so the practical gain on a compressed response is smaller than the raw byte count suggests.
Frequently asked questions
Does formatting change how my CSS behaves?
No. Only whitespace and the presence of optional final semicolons change. Selector specificity, declaration order and every value stay exactly as written.
Does it handle media queries and nesting?
Yes. At-rules such as @media, @supports and @layer increase the indentation depth, so nested blocks are indented correctly.
Will a data URI in a background image survive?
Yes. Everything inside url() is copied through as a unit, so the colons and semicolons in a data URI do not get treated as CSS structure.
Should I minify CSS if my server uses gzip?
The benefit is modest. Gzip already collapses repeated whitespace, so minifying first typically saves only a few percent more. It is still worth doing for CSS inlined into HTML, where every byte is in the critical path.
Related tools
- HTML FormatterRe-indent HTML so its nesting is readable. Fragments work as well as whole documents, and the contents of pre, script and style blocks are left exactly as written.
- XML FormatterRe-indent XML so its structure is readable, and find out immediately if it is not well-formed. CDATA sections and declarations are preserved exactly.
- JSON FormatterPaste JSON to pretty-print it with consistent indentation, or minify it back down. Invalid JSON is reported with the exact line and column so you can find the problem.
- Base64 EncoderEncode any text to Base64, including emoji and non-Latin scripts. Switch to the URL-safe alphabet when the result has to travel in a URL.