CSS Formatter

Beautify CSS with Prettier: one declaration per line, consistent spacing, 2 or 4 spaces or tabs, and cleanly nested media queries. Runs in your browser.

Indentation

CSS input

Output

Runs entirely in your browser. Your data is never uploaded.

Related Tools

View All

JSON Formatter JSON Validator XML Formatter camelCase snake_case kebab-case PascalCase CONSTANT_CASE

What is CSS Formatter?

The CSS Formatter turns minified or inconsistent stylesheets into readable CSS using Prettier: each rule and declaration on its own line, normalised spacing around colons and selectors, and nested at-rules indented.

How to use CSS Formatter

Paste CSS into the input box or click Load sample.
Choose the Indentation.
Click Format (the output also updates while you type).
Copy or download the formatted CSS.

Example

Input

a{color:red;margin:0 auto}

Output

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

When to use CSS Formatter

Use it to read minified CSS from a website, normalise hand-written stylesheets before review, or format CSS snippets for docs. It does not check property names or values – use the CSS Validator for that. For SCSS or Less, choose that language in the Code Beautifier.

How CSS Formatter works

The stylesheet is parsed with Prettier's PostCSS-based parser and printed with Prettier's CSS rules: a space follows each colon, each declaration ends with a semicolon, and selectors in a list go on separate lines. Unclosed blocks or other syntax errors are reported with line and column.