CSS Formatter

About this tool

Paste CSS and the tool lays it out with one declaration per line, braces on their own lines and a blank line between rules, using the js-beautify library. Choose 2 or 4 spaces for indentation. It only changes whitespace: it does not reorder properties, add missing semicolons, remove unused rules or check that your CSS is valid. If you need the opposite, a smaller file for production, use the CSS Minifier. Everything runs in your browser and your stylesheet is never uploaded.

How to use it

1. Paste your CSS into the box.
2. Choose a 2 or 4 space indent.
3. Read the formatted CSS in the output.
4. Press Copy to take it.

Example

Shown with the 4 space indent.

a{color:red;margin:0 auto;}

a {
    color: red;
    margin: 0 auto;
}

Common problems

A missing semicolon stays missing

The formatter does not add punctuation. Add the semicolon yourself if the last declaration lacks one.

Selectors such as .a>p are not spaced out

Whitespace inside selectors is left as written.

Output looks wrong after a typo

Unbalanced braces confuse any formatter. Check that every { has a matching }.