Format CSS

Format CSS rules, declarations, at-rules, and nested blocks consistently.

freeworks offlinenothing uploaded
ToolCSS Formatter
Input
Output
—

How it works

CSS tokens are re-emitted with indentation around rules and declarations while comments, strings, and custom-property values remain opaque. Formatting changes layout without changing computed style.

  • Two-space indentation keeps cascade readable.
  • Brace style remains a project preference.

Worked example

Format minified CSS
Add proper indentation to compressed CSS
Input
											body{margin:0;padding:0;}.container{max-width:1200px;margin:0 auto;}
Output
												body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

When to use this

Stylesheet reviews, design systems, and generated CSS debugging format rules.

Edge cases

  • A semicolon inside a string is not a declaration terminator.
  • Custom-property values can resemble nested syntax.
  • Data URLs must not be split at punctuation.

References