Does this send my stylesheet anywhere?

No. Formatting runs entirely in your browser using Prettier's bundled CSS parser.

Does it support SCSS or LESS syntax?

This tool targets plain CSS. Use Compile Sass or Compile LESS first if you're working with those preprocessors.

Will formatting change the order of my rules or declarations?

No. Prettier preserves the order of rules and declarations exactly as written; it only changes whitespace, indentation, and quote style, since reordering could change which declaration wins under the cascade.

Does it support modern CSS like custom properties and nesting?

Yes. Prettier's PostCSS-based parser handles custom properties (--variable-name), media queries, and native CSS nesting the same way it formats any other rule.

CSS Formatter - Format CSS Online

Overview

Introduction

A minified stylesheet or one pulled from a build tool's output is unreadable the moment you need to debug it.

This tool reformats any valid CSS into consistently indented rules, entirely in your browser.

What Is CSS Formatter?

A CSS formatter built on Prettier's PostCSS-based parser, which re-prints your stylesheet with one declaration per line and consistent indentation.

It preserves the cascade order of your rules exactly; only whitespace and formatting change.

How CSS Formatter Works

Prettier parses the stylesheet into a syntax tree and re-prints it using its CSS formatting rules.

A malformed rule (an unclosed brace, for example) causes parsing to fail with the exact line and column reported.

When To Use CSS Formatter

Use it when debugging a minified stylesheet in dev tools, or cleaning up CSS pasted from a design tool export.

It's also useful before code review, so reviewers see consistent formatting rather than a wall of one-line rules.

Often used alongside CSS Minifier, CSS Validator and HTML Formatter.

Features

Advantages

Runs entirely client-side.
Uses Prettier's CSS parser, matching output most teams already expect.
Preserves the exact order of rules and declarations, so formatting never changes cascade behavior.

Limitations

Only reformats plain CSS; SCSS/LESS-specific syntax should go through the matching compile tool first.

Examples

Minified rule

Input

.btn{color:#fff;background:#000;padding:8px 16px}

Output

.btn {
  color: #fff;
  background: #000;
  padding: 8px 16px;
}

Each declaration gets its own line with consistent indentation and spacing.

Best Practices & Notes

Best Practices

Format CSS before committing it, so diffs reflect actual rule changes rather than whitespace noise.
Pair with the CSS Validator if you only need a syntax check.

Developer Notes

Formatting is delegated to Prettier's `format()` API with the `css` parser, so behavior matches the `prettier` CLI exactly.

CSS Formatter Use Cases

Cleaning up a minified stylesheet for debugging
Normalizing CSS pasted from a design tool or LLM response
Formatting CSS custom properties exported from a design system's token pipeline

Common Mistakes

Pasting SCSS/LESS syntax (nesting, variables) and expecting plain CSS formatting to accept it.
Assuming properties get alphabetized or reorganized; Prettier only touches whitespace, never declaration order.

Tips

If formatting fails, the reported line and column point at the exact syntax problem.
Run the result through the CSS Minifier afterward if you need a compact build output instead of a readable one.

CSS Formatter