CSS Formatter — Read a Minified Stylesheet

What this tool does

Minified or tangled CSS becomes readable CSS.

a{margin:0 auto;--x:1px}@media print{a{color:#000}}

a {
  margin: 0 auto;
  --x: 1px
}

@media print {
  a {
    color: #000
  }
}

One declaration per line, one level of indentation per nesting level, a blank line between top-level rules. The indentation is an option: two spaces by default, four if that is your house style.

What it leaves exactly as it is

• Your values. #FFFFFF does not become white, 0px does not become 0, and margin: 10px 10px 10px 10px is not folded. Those rewrites are an optimiser’s job, and each one is a judgement call about your stylesheet.
• The order. Declarations and rules come out in the order you wrote them. In CSS the order is the meaning: the last rule of equal specificity wins.
• Your comments. They keep their place, above the rule or at the end of the line, because that is what they were written for.

It is not a validator

a { color: red

a {
  color: red

The missing brace comes back missing. A formatter reads what you give it and lays it out; it does not tell you whether a browser would accept it. That cuts both ways: it means a stylesheet with a syntax error still gets tidied so you can find the error, and it means a tidy result proves nothing about validity. For that, use your browser’s dev tools, or a linter such as Stylelint.

The other direction

The CSS minifier on this site is the reverse trip: it strips the whitespace this tool adds, keeps strings, url() contents and licence comments intact, and leaves your values alone in the same way. Formatting to read, minifying to ship — the same stylesheet, two shapes.

Private by design

Everything runs locally in your browser with JavaScript. Your data is never uploaded, which makes the tool safe for sensitive content, and it keeps working offline.