CSS Formatter & Minifier

About the CSS Formatter

CSS is the language that describes how HTML is painted on screen, but as stylesheets grow they accumulate inconsistent indentation, single-line rules, leftover debug comments, and stray trailing semicolons. This formatter gives you two complementary operations on the same input: Format rebuilds a stylesheet with predictable indentation so it reads cleanly in a code review, and Minify strips every byte that is not strictly necessary so the file ships faster over the network. Both run entirely in your browser — no stylesheet is ever uploaded.

How it works

The formatter starts by parsing the stylesheet into a tree of rules. Each rule has two parts: a selector (the part before the braces, which may be a type, class, id, attribute, or compound selector) and a list of declarations (the property: value pairs inside the braces). At-rules such as @media and @keyframes are handled as nested blocks. Once the input is parsed into this structure, it is re-serialized: pretty-print mode emits each declaration on its own line with the chosen indent (2 spaces, 4 spaces, or a tab), and minify mode joins everything back into the shortest valid string.

Minify removes comments, all non-significant whitespace, and the optional semicolon after the last declaration in a block, while preserving every property value, selector, and at-rule. The critical constraint is that safe reformatting must not change the cascade or specificity: rules keep their original order, selectors are not merged or split, and shorthand properties are left untouched. As long as those invariants hold, formatted and minified output render identically to the original.

Common use cases

• Normalizing indentation before committing a hand-edited stylesheet
• Shrinking a large CSS bundle before deploying to production
• Cleaning up CSS pasted from a minified bundle so it can be read
• Producing a consistent style for an entire design-system codebase
• Stripping author comments and dead whitespace before code review

Worked example

Given messy, single-line input:

.btn{color:#fff;background:#4f46e5;padding:8px 16px;border-radius:6px}
.btn:hover{background:#4338ca}

Formatting with a 2-space indent yields the readable form:

.btn {
  color: #fff;
  background: #4f46e5;
  padding: 8px 16px;
  border-radius: 6px;
}
.btn:hover {
  background: #4338ca;
}

And minify collapses it back to the smallest valid form, with the trailing semicolons and newlines removed:

.btn{color:#fff;background:#4f46e5;padding:8px 16px;border-radius:6px}.btn:hover{background:#4338ca}

All three forms apply the exact same styles — only the human readability and byte count differ.