Formatters

CSS Formatter

Beautify CSS and find unbalanced braces.

Input
CSS input
Output
Result
Options

Spaces per level of nesting.

About this tool

Formatting puts one declaration per line, splits comma-separated selectors so each is visible, and indents the contents of media queries and other at-rules. Minified CSS becomes readable, and a missing brace becomes obvious.

Brace balance is reported, which is the most useful diagnostic here: a single unclosed rule silently swallows everything after it, so styles simply stop applying with no error anywhere.

How to use it

  1. Paste or upload your cssDrop a file onto the input pane, use the file picker, or paste the text directly.
  2. Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
  3. FormatPress Format, or use Ctrl+Enter (Cmd+Enter on macOS).
  4. Copy or downloadCopy the result, or download it as a .css file.

Worked examples

Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.

Minified CSS with a media query

Input

.card,.panel{color:red;margin:0}@media (min-width:600px){.card{display:flex}}

Output

.card,
.panel {
  color: red;
  margin: 0;
}

@media (min-width: 600px) {
  .card {
    display: flex;
  }
}

Each selector gets its own line, and the media query contents are indented.

What to watch for

The details that decide whether a conversion is correct, and where information can be lost without any error being raised.

Selector lists are split, but function arguments are not
A rule like .a, .b, .c gets one selector per line, so it is clear how many elements are targeted. Commas inside :is(), :where() and :not() are left alone, since those are argument lists rather than separate selectors.
At-rules are indented as blocks
Contents of @media, @supports, @layer and @container are indented one level, making the conditional scope visible. Nested at-rules indent further.
Strings and url() are preserved
A semicolon or brace inside a quoted string or a url() is content, not syntax. The formatter tracks quote and parenthesis state, so a content property containing "; }" is not mistaken for the end of a declaration.
Unbalanced braces are reported
Because an unclosed rule absorbs all following declarations without producing an error, the symptom is usually "my styles stopped working halfway down the file". The brace count tells you immediately whether that is what happened.
Declarations are not reordered
Order within a rule is significant in CSS, later declarations win, and shorthand properties reset longhand ones. Nothing is reordered or merged, so the formatted output behaves identically.

Limitations

  • Handles CSS; Sass and Less specific syntax is not fully supported.
  • Reports brace balance rather than validating properties and values.
  • Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.

Questions

Does formatting change how my styles apply?
No. Only whitespace changes. Declaration order is preserved, and nothing is merged or removed.
Why are my styles ignored after a certain point?
Usually an unclosed brace: the rule swallows everything after it. The formatter reports brace balance so you can find it.
Does it handle Sass or Less?
Partially. Plain nesting often formats acceptably, but preprocessor-specific syntax such as mixins and directives is not understood. Use your preprocessor's own formatter for those.

Related tools

More CSS tools