CSS Beautifier

What is a CSS beautifier?

CSS that comes out of a preprocessor, a design tool, a theme file or a minifier is written for machines: selectors and declarations run together on a handful of enormous lines, and the rule structure — which declarations belong to which selector, which rules live inside which media query — is invisible. A CSS beautifier (also called a formatter) rewrites the stylesheet with consistent line breaks and indentation: one declaration per line, nested rules stepped in, and the skeleton of the stylesheet readable at a glance and diffable without tears.

This one does a second job before it beautifies, the same discipline as this site's other formatters: it checks the structure first. One missing closing brace does not just break one rule — it silently swallows every rule after it into the wrong scope. If the braces, comments and strings do not check out, you get the line and column of the first problem instead of a tidied-up stylesheet with a hole in it.

How to use this tool

1. Paste your CSS into the box above (or press Load sample to see a worked example). You can also upload a .css file or drop one onto the box — the file is read in your browser and never sent anywhere.
2. Choose an indent — 2 spaces is the common default; 4 spaces and tabs are one click away.
3. Press Beautify. If the structure checks out you get the reformatted stylesheet and a line count; if it does not, you get the precise location of the first problem — fix that one and beautify again.
4. Tick Auto-format as I type if you would rather not press the button: the result updates as you edit (very large inputs are still formatted on demand, to keep typing smooth). While the stylesheet is mid-edit and unbalanced, the message line tells you so and your last good result stays on screen.
5. Use Copy result or Download result to take the beautified stylesheet with you. Your input above is never modified — the result is a separate copy.

Checked first, then beautified

The structural check walks the stylesheet the way a browser's parser does, which means it knows the difference between structure and content. Braces inside content strings and comments do not count; an escaped quote does not end a string early; a comment that never closes is reported where it opened, not where the file happened to run out. What the check does not do is judge your declarations — an unknown property or an invalid value is a design-level mistake a formatter has no business "fixing", and it passes through exactly as written.

What formatting never changes

Formatting here is a layout rewrite, never a data rewrite. Selectors keep their spelling. Declarations are never reordered — in CSS, order inside a rule is meaning, because the later declaration wins — and no rule is merged with another, split apart, or renamed. Values keep their exact text, comments survive, and vendor prefixes stay where you put them. What changes is the whitespace between things: indentation, the line breaks around rules and declarations, and blank lines, of which at most one consecutive blank is kept, as authored. The opposite job — squeezing whitespace out for production — belongs to a minifier, not a beautifier.

Examples

This compressed fragment:

.card{color:red;margin:0 auto}.card p{font-size:14px;line-height:1.5}

beautifies into:

.card {
  color: red;
  margin: 0 auto
}

.card p {
  font-size: 14px;
  line-height: 1.5
}

And this broken fragment — a media query whose outer brace is never closed — is reported with the position of the brace that opened it, instead of being beautified into a stylesheet where every following rule is silently inside the query:

@media (max-width:600px){.card{width:100%}

Common CSS mistakes this catches

• The missing closing brace — one unclosed rule quietly adopts every rule that follows it; the page "mostly works" and the bug hides for weeks.
• The extra closing brace — the reverse: rules after it fall out of the @media or @supports block they belonged to.
• The unterminated comment — everything after /* is comment until */; forget it and half the stylesheet vanishes without an error anywhere.
• The unclosed string — a content value or font name whose quote never closes swallows the declarations after it.