Does the formatter validate my CSS?

No. Broken input such as a rule with no closing brace is still indented, and the green Valid mark only means the formatter did not crash. Use your browser's developer tools or a linter to find real mistakes.

Can I switch to tabs or four spaces?

Not on this page. CSS output always uses two spaces, unlike the HTML Formatter, which offers a choice between two and four. Replace the indentation in your editor if your project needs something else.

Will my comments survive formatting?

Yes. Comments are kept and placed on their own line before the rule they sat next to. Only whitespace between tokens is rewritten.

How do I shrink the CSS again after reading it?

Paste the formatted stylesheet into CSS Minify. It strips comments, whitespace and empty declarations in one step, and keeps strings, url() values and calc() spacing intact.

CSS Formatter

Format and beautify CSS.

Loading…

About CSS Formatter

A minified stylesheet is one long line, hard to read and harder to compare. Paste it and press Format CSS: each selector starts a new line, declarations are indented by two spaces, a blank line separates rules, and combinators are spaced out so .a>.b becomes .a > .b. Comments and url() values are kept, and at-rules such as @media nest their rules one level deeper. The beautifier only works on layout and does not check that the rules are correct.

Features

One declaration per line, indented by two spaces
A blank line between rules
Spaces around combinators such as > and +
Comments and url() values kept as written
At-rules like @media indent their inner rules

Limitations

Nothing is formatted until you select Format CSS, and the indent is fixed at two spaces.
Errors such as a missing brace or colon are not reported, and the Valid marker only means formatting finished.
Layout is all that changes: missing semicolons are not added, properties are not sorted and shorthand is not expanded.

How it works

Paste the stylesheet into the CSS Input panel.
Select Format CSS.
Read the Formatted CSS panel.
Copy it with Copy Output, or select Clear All to start again.

Example input

.button{color:red;padding:10px;border-radius:4px}

Frequently asked questions

: No. Broken input such as a rule with no closing brace is still indented, and the green Valid mark only means the formatter did not crash. Use your browser's developer tools or a linter to find real mistakes.
: Not on this page. CSS output always uses two spaces, unlike the HTML Formatter, which offers a choice between two and four. Replace the indentation in your editor if your project needs something else.
: Yes. Comments are kept and placed on their own line before the rule they sat next to. Only whitespace between tokens is rewritten.
: Paste the formatted stylesheet into CSS Minify. It strips comments, whitespace and empty declarations in one step, and keeps strings, url() values and calc() spacing intact.