CSS Beautifier

Input

Output

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e2e4ee;
}
.card:hover {
  border-color: #4f46e5;
}
@media (max-width:640px) {
  .card {
    padding: 12px;
  }
}

About the CSS Beautifier

Paste minified or inconsistently formatted CSS to get it back reformatted with consistent indentation per nesting level — or switch to Minify to strip it down to the smallest valid form for shipping.

Handy for making sense of a minified stylesheet pulled from a live site's dev tools, cleaning up CSS pasted from a design tool export, or double-checking what a nested block actually contains before you edit it. The hand-written tokenizer understands quoted strings and comments, so it won't mangle a semicolon sitting inside a `content: "a; b"` value.

How to Use the CSS Beautifier

1

Paste CSS into the input panel.

2

Switch between Formatted and Minified views.

3

Copy the result for your stylesheet or build pipeline.

Frequently Asked Questions

Is my CSS sent anywhere?

No. Formatting and minifying both happen in your browser with a hand-written tokenizer — nothing is uploaded.

Does formatting handle comments and quoted strings correctly?

Yes — comments are kept on their own line, and characters inside quoted strings (like a ";" inside content: "a; b") are read as part of the string, not treated as CSS structure.

How aggressive is Minify?

It strips comments, collapses whitespace, and removes the space around { } : ; , — a solid reduction for typical stylesheets, though it isn't as exhaustive as a dedicated build-tool minifier (no shorthand merging, no unit rewriting).

Does it work on SCSS or LESS, not just plain CSS?

It's built for plain CSS syntax. Nesting, variables (`$var`/`@var`), and mixins from preprocessors aren't understood as special syntax — the tokenizer will still pass most of it through reasonably, but formatting quality is only guaranteed for standard CSS.