Toolverge

CSS Beautifier

A CSS beautifier expands minified or hand-compressed stylesheets into readable, indented CSS so you can debug selectors and declarations. Toolverge formats CSS locally in your browser with a hand-written tokenizer — no upload, no external library.

96 → 119 bytes

.card {
  color: #1a2332;
  padding: 1rem 1.25rem;
  border: 1px solid #ccc;
}
.card:hover {
  border-color: #b08d4f;
}

How it works

  1. Paste minified or compact CSS into the box. A sample loads first so you see formatted output immediately.
  2. The tokenizer walks the CSS once, tracking strings and comments so it never corrupts quoted content.
  3. Read the indented, line-broken result below, with a before/after byte count.

Formula One declaration per line; indent increases after "{" and decreases after "}".

Frequently asked questions

Does this beautifier validate my CSS?

No. It reformats reasonably well-formed CSS for readability; it is not a CSS syntax validator or linter.

Will it corrupt strings like content or url()?

No. A character-scanning tokenizer tracks quoted strings and comments so whitespace inside them is never touched.

Is this the opposite of a CSS minifier?

Yes. Use the CSS minifier to shrink file size for production, and this beautifier to expand it back for debugging.

Is my CSS uploaded anywhere?

No. Formatting runs entirely in your browser; Toolverge does not send your CSS to any server.

Does it change my indentation size?

It uses a standard 2-space indent per nesting level, matching common CSS style guides.