About CSS Formatter
The CSS formatter normalises a stylesheet into a consistent shape: each selector on its own line, one declaration per line within the braces, two-space indentation, and a single space after each colon. Rules that were written on one line become readable, and rules that were already spread across many lines become consistent.
Consistency is the real benefit rather than aesthetics. A stylesheet where some rules are minified and others are expanded is difficult to review: a change to a declaration can be invisible when it sits inside a single very long line, whereas the same change in a formatted file shows up plainly in a diff.
The transformation is structural and does not evaluate or rewrite anything. Should still selects the same elements, and cascade order is untouched, so the formatted stylesheet behaves exactly as the original did — there is nothing here that can change how a page renders.
How to use CSS Formatter
- 1 Paste the CSS stylesheet, minified or otherwise.
- 2 Each selector and declaration is placed on its own line with consistent indentation.
- 3 Copy the output into your stylesheet or your editor.
Frequently asked questions
Will formatting change how the styles apply?
No. Whitespace between declarations and around punctuation has no effect on which rules win or what they do. Selectors, properties and values are left exactly as written — only the layout of the source changes.
Does it sort or merge my rules?
No, and that is deliberate. Reordering rules would change the cascade and therefore the rendered result, so a formatter that reordered declarations would be actively dangerous on a stylesheet you did not write.
How are comments treated?
Comments are retained, so explanatory notes in your stylesheet survive the round trip. That distinguishes formatting from minifying, which strips them and is intended for a production build where the source is no longer edited.
Does it handle modern syntax such as nesting or custom properties?
It treats the stylesheet as text structured by braces, semicolons and colons, so newer at-rules and custom properties pass through unchanged. It is a layout transformation rather than a parser that validates against a CSS specification.
Free, online, and private
Free to use
CSS Formatter is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How CSS Formatter behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Indent unit | 2 spaces, hard-coded — the rewrite never deepens the indent for a nested block |
| Line-break triggers | a `{`, a `;` inside a block, and a `}` that already follows a newline |
| Whitespace normalised around | the six characters { } : ; , > — no others are touched |
| Empty declaration | a `;` immediately before `}` is dropped (`;}` collapses to `}`) |
| Blank lines | runs of blank lines collapse to one, and exactly one trailing newline is appended |
| Comments | left in place and never re-indented — "/* c */ a {" stays on a single line |
Compiled from the implementation of this tool and checked against it by itoolnet.
What CSS Formatter does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Closing braces are not put on their own line. The `;}` collapse runs before the line-break insertion, so the last declaration of a block keeps `}` glued to it: body{color:red;margin:0} comes back as "margin:0}".
- Indentation is a flat two spaces with no depth tracking, so a rule nested inside @media or @supports is indented exactly as far as the declaration inside it, and the nesting is invisible in the output.
- It is a regex rewrite rather than a CSS parser: comments and quoted values are not protected, so a `;`, `{` or `}` inside a string or inside a comment is treated as real syntax and the spacing around it is rewritten.
- Only those six characters are normalised. A `+` or `~` combinator keeps whatever spacing it arrived with while `.a>.b` loses its, so combinator spacing in the output depends on how the input happened to be written.
Tested and documented by itoolnet, the team that builds and maintains this site.