CSS Formatter

About this CSS formatter

A CSS formatter (sometimes called a beautifier or pretty-printer) takes a stylesheet, parses it, and re-emits the same rules with consistent indentation, one declaration per line, and predictable spacing around selectors, colons, and braces. The semantic meaning is unchanged: every selector still matches the same elements, every property still resolves to the same value. Only the whitespace and casing change. This page wraps the open-source js-beautify library (the same engine that powers the CSS beautifier inside Brackets, Sublime Text plugins, and many web IDEs) so the output matches what you would get running npx js-beautify --css at the terminal.

You typically reach for a formatter when you have minified, hand-mangled, or browser-extracted CSS and you need to read it. Examples: a print stylesheet pulled out of a third-party theme, the contents of a <style> tag scraped from a competitor's homepage, the output of an old Sass compile with no source map, or a chunk of inline CSS pasted from chat. Re-formatting takes one second and turns a 4 KB single-line blob into a 6 KB readable file.

How the formatter works

The page runs entirely in your browser. On Run, we invoke js-beautify's css_beautify with a two-space indent. The library tokenizes the input into selectors, blocks, declarations, comments, and at-rules, then walks the token stream emitting one declaration per line with normalized whitespace.

output = window.css_beautify(input, {
  indent_size: 2,        // two spaces per nesting level
  selector_separator_newline: true,
  newline_between_rules: true,
  end_with_newline: true,
});

The transform is purely textual. It does not resolve @import URLs, does not flatten Sass or Less syntax, and does not compute specificity. Pass the post-compilation CSS, not the source language.

Worked example: minified rule to formatted

Input (a single-line minified block, 184 bytes):

.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px}.card h3{margin:0 0 8px;font-size:16px;color:#0f172a}.card p{margin:0;font-size:14px;color:#475569}

After js-beautify with two-space indent (251 bytes, 17 lines):

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #0f172a;
}

.card p {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

Formatter options compared

Common pitfalls

• Pasting Sass, Less, or Tailwind source. The formatter assumes plain CSS. A @mixin body or a Tailwind @apply rule may format but the engine does not understand the syntax and may rewrap incorrectly. Compile to CSS first or use the dedicated Sass formatter.
• Expecting comment preservation in every position. js-beautify keeps comments where it can, but inline comments between two declarations in the same rule may shift to a leading position. Verify before pasting into production.
• Confusing format with lint. A formatter does not flag invalid colors, unknown properties, or unused selectors. Pair this tool with stylelint for that work.
• Pasting CSS-in-JS strings with template-literal interpolation. A line like color: ${theme.primary}; is not valid CSS once the tagged template runs. Format the rendered output, not the source template.
• Losing source-order significance. CSS cascade depends on declaration order. The formatter never reorders declarations, but if you copy paste between blocks you may accidentally change cascade. Format then visually diff against the original.
• Forgetting that the output is regenerated whitespace. Production CSS should be minified, not formatted. Run a CSS minifier before deploying to keep network bytes small.

Related developer tools

Frequently asked questions