When to use CSS Formatter

Cleaning pasted CSS from DevTools
Preparing styles for a pull request
Separating selectors visually before edits

Example

Input

.card{width:calc(100% - 2rem);content:"a;b"}

Output

.card {
  width: calc(100% - 2rem);
  content: "a;b";
}

How to use

Paste CSS. Add compacted or uneven CSS.
Format rules. Run to normalize braces and declaration lines.
Continue editing. Copy into your project or the compiler CSS pane.

Processing and limitations

Uses the Prettier CSS parser. Punctuation inside quoted strings is preserved. Formatting is not a browser compatibility test and does not compile Sass or Less.

Reference

Benefits

Free to use—no account required
Runs in your browser
Instant results with no software install
Basic processing does not upload your content to a server
Formatting is not vendor-prefixing or autoprefixing—only readability cleanup.

Not the same as

For aggressive compression, use CSS Minifier. For gradients, use CSS Gradient Generator.

CSS Formatter