LangStop

CSS Pretty Print Online — Free Tool

CSS Pretty Print

Paste minified or messy CSS and get it back neatly formatted: one declaration per line, consistent indentation, and each selector of a list on its own line. Formatting uses Prettier and runs in your browser.

What pretty-printing changes

  • Splits rules apart — minified one-line CSS becomes one rule block per selector.
  • One declaration per line, indented inside its block.
  • Selector lists (a:hover, a:focus) get one selector per line.
  • Consistent spacing after colons and around combinators, and a semicolon after every declaration.
  • Lowercase hex colours and normalised whitespace in values.

It never changes what the CSS does: no selectors or declarations are added, removed or reordered.

Example

.nav{display:flex;gap:8px}.nav a:hover,.nav a:focus{color:#3b82f6;text-decoration:underline}

becomes

.nav {
  display: flex;
  gap: 8px;
}
.nav a:hover,
.nav a:focus {
  color: #3b82f6;
  text-decoration: underline;
}

When to use it

  • Reading a third-party or production stylesheet that only ships minified.
  • Debugging — it is far easier to find the rule that wins when each declaration sits on its own line.
  • Cleaning up hand-written CSS before committing it, so diffs show real changes rather than whitespace.

Other buttons on the page

  • Minify turns the formatted CSS back into a compact one-liner for production.
  • Validate reports syntax errors with their line numbers.

Tips

  • Prettier needs valid CSS. If formatting fails, run Validate first — an unclosed brace is the usual cause.
  • Formatting SCSS or Less? Use the SCSS Formatter or Less Formatter, which understand nesting and variables.