CSS Formatter

What the CSS Formatter Does

This tool takes CSS that has been minified or jammed together and reformats it into the conventional, readable layout: selector and opening brace, then one property-and-value per line indented two spaces, then the closing brace, with rules separated by a blank line.

It is the quick way to make a compressed stylesheet legible — to inspect what a build tool produced, read a copied rule, or tidy a snippet before pasting it into your project.

How It Works

The tool runs a series of regular expressions over the text. It puts a space and a line break around each opening brace, a line break after every semicolon, and the closing brace on its own line followed by a blank line. Declarations end up indented two spaces.

Because it works purely on the braces, semicolons and surrounding whitespace, it is fast and needs no dependencies. It is not a CSS parser, though: it does not understand selectors, properties or values, so it cannot validate the code or reason about structure beyond those punctuation marks.

Processing pipeline

1. Break around braces. Put a space before each opening brace and a line break after it, and place each closing brace on its own line.
2. One declaration per line. Add a line break after every semicolon so each property sits on its own line.
3. Indent declarations. Indent the lines inside a rule by two spaces.
4. Separate the rules. Add a blank line after each closing brace, then trim stray whitespace.

How it reformats

It breaks lines around the punctuation but does not add a space after the colon, so margin:0 stays as-is. It also indents every declaration exactly two spaces, so nested at-rules like a media query are not indented an extra level.

Privacy

Your CSS never leaves your device. It is reformatted in your browser with no network request, so nothing is uploaded.

Because the work is local, you can tidy proprietary or unreleased styles without them being stored or sent anywhere.

Nothing persists between sessions — close the tab and the input and output are gone.

Standards & references

• CSS syntax — CSS rules are a selector followed by a brace-enclosed block of property and value declarations separated by semicolons. The tool keys off those braces and semicolons rather than parsing the grammar.
• At-rules — Rules like a media query wrap other rules in another brace block. Because the tool indents every declaration by a fixed two spaces, it does not nest the inner rules one level deeper.
• Parser-based formatters — Tools like Prettier or stylelint parse the stylesheet into a tree and reprint it, so they can validate, nest correctly and give idempotent output. This tool is a lighter regex tidier.

Accuracy & Limitations

It produces the conventional layout for ordinary rules, but it is a regex tidier, not a parser. It does not validate the CSS or check that braces balance — it only reflows around the punctuation, so malformed input yields malformed output.

It does not add a space after the colon in a declaration, so a property reads as margin:0 rather than margin: 0. The value is correct; only the cosmetic spacing differs from what a full formatter would produce.

At-rules are not nested. Because every declaration is indented exactly two spaces, the rules inside a media query or supports block sit at the same indent as a top-level declaration rather than one level deeper.

A semicolon or brace inside a string or a comment can trigger an unwanted line break, since the tool reacts to those characters without understanding that they are quoted or commented out. A parser would ignore them.

Real-World Use Cases

When to use it — and when not to

For a parser-based reformat that validates and nests correctly, use Prettier or stylelint in your editor. This tool is for a quick in-browser tidy of a snippet, not production linting.

Frequently Asked Questions

References

• CSS syntax (MDN Web Docs)
• At-rules (MDN Web Docs)
• What is Prettier? (Prettier docs)

Related Tools