CSS Formatter

Runs entirely in your browser

Beautify and indent CSS directly in your browser.

Input CSS

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

Formatted output

Indent size

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

Paste your CSS into the Input box.
Choose an indent size.
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.

Frequently Asked Questions

Is my CSS uploaded to a server?

No. Formatting happens entirely in your browser.

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.