CSS Formatter

Turn minified or messy CSS back into readable code, with one declaration per line and consistent indentation inside rules and media queries.

Updated
Runs in your browser. Your data is not uploaded.
Formats as you type for inputs up to 200 KB.

How to use the CSS Formatter

  1. Paste CSS into Code input, or upload or drop a .css file.
  2. Choose the Indent, and whether to add a blank line between rules.
  3. Press Format, then copy the result or download it.

How it works

  • Each selector list opens a block, and every declaration inside it goes on its own line, indented one level.
  • At-rules such as @media, @supports, and @layer, and native CSS nesting, add another level of indentation.
  • A space is added after each property's colon. Missing semicolons are not added, so the last declaration in a rule stays as you wrote it.
  • Comments, strings, and url() values are copied unchanged, so data URIs and quoted content survive.
  • Selectors separated by commas each get their own line.

Examples

Input:

.btn{color:#fff;background:#1f5fbf}@media (max-width:600px){.btn{width:100%}}

Formatted with 2 spaces:

.btn {
  color: #fff;
  background: #1f5fbf
}

@media (max-width:600px) {
  .btn {
    width: 100%
  }
}

Limitations

  • The formatter doesn't check CSS for errors, remove duplicate rules, or add vendor prefixes.
  • Sass, SCSS, and Less mostly format well, but mixins and control directives may not be indented perfectly.
  • Values inside media query parentheses are kept as written.
  • Files are limited to 5 MB.

Frequently asked questions

Can I format SCSS or Less here?

Usually yes. Their syntax is close enough to CSS that nesting, variables, and comments format well. Complex mixins may need a small manual touch-up.

How do I make my CSS smaller instead?

Use the CSS Minifier, which removes comments and whitespace to reduce file size.

Does formatting change how the CSS works?

No. Only whitespace and line breaks change. Selectors, values, and their order stay the same.

Is my CSS uploaded?

No. Formatting runs in your browser.

Often used together with the CSS Formatter.

  • CSS Minifier

    Minifies CSS and shows the size saving, raw and gzipped.

  • HTML Formatter

    Beautifies HTML with consistent indentation, including inline CSS and JavaScript.