CSS Formatter / Minifier

What is CSS Formatter?

By default the tool formats CSS with one declaration per line. Prefix the input with minify: to remove comments and whitespace instead.

How to use CSS Formatter

1. Paste your input into the editor above, or select Sample to load an example.
2. Select Format CSS. If the input cannot be processed, a message explains what to fix.
3. Use Copy or Download to take the result with you, and Clear to start again.

Example

Input

.btn{color:#fff;padding:8px 12px}

Output

.btn {
  color:#fff;
  padding:8px 12px
}

Practical use cases

• Read generated CSS
• Compact small snippets
• Review nested at-rules

Common problems

• Assuming formatting validates browser support
• Removing needed whitespace inside values
• Minifying before debugging

Frequently asked questions