CSS Formatter

Pasting a minified stylesheet like body{margin:0;padding:0;font-family:Arial,sans-serif} into the CSS Formatter and clicking Format CSS rewrites it as four indented lines, one declaration per line. The formatter restores readable structure to CSS that has been compressed for delivery or written in a hurry. It runs entirely in the browser, so nothing you paste leaves your machine.

Format minified CSS into readable lines

The formatter turns a single run of minified CSS into a structured file: each selector gets its own line with { at the end, every declaration sits on its own indented line, and a blank line separates one rule from the next. The 323-character sample stylesheet on this page becomes 415 characters across 32 lines with 5 rules once formatted with two-space indentation.

The tokenizer reads the input character by character and only inserts whitespace, so it never changes property names, values, strings, or the order of rules. What changed in the sample is layout: the source was one compressed line, and the output has 32 readable ones.

Three controls do the whole job

The tool has one primary action and two helpers. The Format CSS button runs the formatter on whatever is in the source textarea. The Indentation selector sets the unit used for nesting, with 2 spaces, 4 spaces, or Tab available. The Load example button drops in the 323-character sample stylesheet and formats it immediately, which is the fastest way to see what the output style looks like.

After formatting, the Copy button places the output on the clipboard, and Download .css saves it as formatted.css. Clear wipes the source and output together.

What the formatter normalizes

Several spacing conventions are applied while the CSS keeps its meaning. Whitespace runs collapse to single spaces, so padding:10px  20px becomes padding: 10px 20px. A space is added after the colon that separates a property from its value, giving background: #f5f5f5 instead of background:#f5f5f5. Commas in selector lists and values get a trailing space, so font-family:Arial,sans-serif becomes font-family: Arial, sans-serif.

Pseudo-selectors are the exception. The colon in a:hover stays glued to the selector, and attribute selectors keep their compact form, so input[type="text"] stays exactly that. At-rule conditions keep their standard shape, so @media (max-width:767px) is printed as @media (max-width: 767px).

Reading the size report

The stats row under the output shows three numbers: characters in and out, total lines, and rule count. For the sample input the report reads 323 chars in, 415 out, 32 lines, 5 rules. A minified file that is smaller after formatting usually already contained the whitespace the formatter recreated, while a file with long minified declarations grows because each declaration moves to its own line.

Worked examples

A nested media query shows how depth is handled. The input @media (max-width:767px){.menu{display:none}} becomes three indentation levels:

@media (max-width: 767px) {
  .menu {
    display: none
  }
}

Data URIs survive the pass untouched. A background like url(data:image/png;base64,iVBORw0KGgo=) keeps its semicolons and commas inside the parentheses, because the scanner treats the whole url() call as one unit.

Block comments stay in the output at their own indentation level. A /* Header */ comment above a rule keeps its position, and a trailing comment after the last rule is preserved too.

Why the browser does all the work

Formatting happens in the current tab with no network request, so minified code, proprietary styles, or internal design tokens can be cleaned up without uploading them anywhere. The size report and the formatted result appear in the same tab, and the file is ready to copy or download as soon as the Format CSS button is clicked.