CSS Formatter and Minifier

How to use it

1. 1Paste your text into the box marked "Your CSS"Paste a stylesheet or a fragment. Everything happens inside your browser — nothing is uploaded, so there is nothing for us to store, log or lose.
2. 2Read the result as it updatesThere is no button to press. Format tidies it, Minify compresses it, and either result appears as you type. The output recomputes every time you change the text or one of the options above it.
3. 3Trust minification to be losslessOnly whitespace and comments are removed; values are passed through byte for byte. Computed styles cannot change, which is a stronger promise than most minifiers make and the reason this one is safe on a stylesheet you cannot easily test.
4. 4Read the error when a brace is unbalancedThe most common CSS mistake is a missing closing brace, and it silently disables every rule after it. The message names where the structure stopped making sense.
5. 5Check that nesting and at-rules survived@media, @supports and native CSS nesting are all handled. The notes mention anything unusual the formatter met rather than quietly dropping it.
6. 6Copy or download the resultThe buttons under the output put it on your clipboard or save it as a file, and each one says exactly what it will copy or download. Any note about something the tool changed or deliberately left alone is shown with the result rather than hidden.

About this tool

Format CSS into one declaration per line with indented blocks, or minify it by stripping the whitespace, comments and redundant semicolons — and nothing else.

"Nothing else" is the design decision that separates this from aggressive minifiers: values are never rewritten. No 0px becoming 0, no #ffffff becoming #fff, no shorthand merging. Those rewrites have real edge cases — flex-basis: 0 and flex-basis: 0% are different layouts — and a minifier that changes a computed style has failed silently, which is the worst way. Minification here is lossless by construction.

Understanding the result

Formatted output puts each selector of a list on its own line, each declaration on its own line, and indents nested blocks — @media, @supports, @keyframes and native CSS nesting all included. A blank line separates top-level rules, except from a comment written as their header.

Minified output is the same stylesheet with insignificant whitespace gone, spaces removed around combinators and commas in selectors, and the final semicolon of each block dropped.

An error names what is unbalanced — a brace, parenthesis, string or comment that never closes — and points at where it started.

Example

.card{color:#1e293b;margin:0 auto}@media (min-width:600px){.card{padding:2rem}}

.card {
  color: #1e293b;
  margin: 0 auto;
}

@media (min-width:600px) {
  .card {
    padding: 2rem;
  }
}

Limitations

• Minification being lossless means the output is somewhat larger than an aggressive minifier would produce. That is the deliberate trade: the bytes saved by value rewriting are small, and the failure mode is a silently changed layout.
• This checks structure (balanced braces, parseable declarations), not the CSS vocabulary — an unknown property or a typo in a value passes through, exactly as written.
• Whitespace inside strings and url(...) is data and is never touched; calc() expressions keep their spacing collapsed to single spaces, never removed, because calc(100% - 10px) needs them.
• Selectors are never tightened around colons — a :hover and a:hover are different selectors — only around combinators and commas, where whitespace has no meaning.

Questions