CSS Formatter

Runs entirely in your browser

Beautify and indent CSS directly in your browser.

Advertisement

Advertisement

What is CSS Formatter?

CSS Formatter re-indents a stylesheet so each rule, selector and declaration is easy to scan — one declaration per line, comma-separated selectors split onto their own lines, and nested at-rules like @media indented a level deeper.

How to use CSS Formatter

  1. Paste your CSS into the Input box.
  2. Choose an indent size.
  3. Click Format, then copy the result.

Features

  • One declaration per line, indented under its selector.
  • Comma-separated selectors split onto separate lines.
  • Supports nested @media, @supports and @keyframes blocks.
  • Preserves comments and string values exactly.
  • 100% client-side — your CSS never leaves your browser.

Example

This minified CSS:

.card{color:#111;padding:16px}.card h2,.card h3{margin:0 0 8px}@media (max-width:768px){.card{padding:8px}}

becomes:

.card {
  color: #111;
  padding: 16px;
}

.card h2,
.card h3 {
  margin: 0 0 8px;
}

@media (max-width:768px) {
  .card {
    padding: 8px;
  }
}

Tips for using CSS Formatter

  • Comma splitting only happens outside parentheses, so a selector using a functional pseudo-class like :not(a, b) stays on one line instead of being incorrectly broken at that inner comma.
  • A blank line is automatically inserted after every top-level closing brace, which is why there's a gap between .card { ... } and .card h2, .card h3 { ... } in the Example above.
  • Text inside an at-rule's condition — like (max-width:768px) — is copied through exactly as you wrote it, spacing and all, since it's treated as opaque text rather than being parsed as its own set of declarations.
  • A comment sitting alone on its own line stays on its own line at the current indent level; a comment trailing a declaration on the same line stays attached to that declaration instead of being pulled apart.

Is CSS Formatter safe?

Yes. The comma-splitting and at-rule indentation logic described in the Tips above runs entirely as local JavaScript in your browser — the stylesheet you paste is reformatted and displayed without ever being uploaded to our servers.

Frequently Asked Questions

Does this support @media and nested at-rules?

Yes. Nested blocks like @media, @supports and @keyframes are indented one level deeper than their surrounding rule.

Are comments and multiple selectors preserved?

Yes. Comments are kept in place, and comma-separated selectors (like h1, h2) are each placed on their own line.

Will this change what my CSS does?

No. Only whitespace and line breaks change — every selector, property, value and comment is preserved exactly.

Related tools