CSS Formatter

Prettify compressed CSS into readable rules, with control over indentation and brace placement.

CSS Formatter Runs locally · No sign-up
Output

About CSS Formatter

Compressed stylesheets from build pipelines and minified themes are hard to reason about when everything sits on a single line. This formatter expands each rule so selectors, braces, and declarations each get their own line, turning an unreadable blob into a stylesheet you can actually edit.

The parser understands the full CSS grammar, so values, vendor prefixes, custom properties, and even nesting syntax stay intact while whitespace is normalized. Comments are kept with the rule they belong to, and an optional pass groups properties so related declarations sit together.

Web developers reformat third-party themes before customizing them, maintainers of long-lived stylesheets use it to standardize formatting across contributors, and teams auditing a codebase run it on every file to make diffs smaller and more reviewable. Anyone debugging a layout problem can quickly read the exact rules that apply to an element.

How to Use

  1. Paste compressed or messy CSS.
  2. Press Format CSS.
  3. Copy the beautified stylesheet.

Example

.btn{color:#2f6feb;padding:8px 16px} .btn { color: #2f6feb; padding: 8px 16px; }

Each declaration moves to its own indented line and spacing is added around braces.

FAQ

Does it preserve comments?

Yes, comments are kept and indented with the rule they belong to.

Can it sort properties?

An optional pass groups properties by type, which is a common CSS organization convention.

Will formatting change how CSS renders?

No, whitespace is insignificant in CSS, so formatting never affects the visual result.

Does it handle @media queries and keyframes?

Yes. Nested at-rules like @media, @supports, and @keyframes are indented inside their blocks, and the declarations within them are formatted exactly like top-level rules.

Will formatting change my line numbers?

Formatting adds lines, so line numbers will change. If you need stable references for issues, format once and use the output as your canonical version.