CSS Formatter & Minifier

What is a CSS formatter?#

A CSS formatter does two things that look opposite but solve the same problem: it expands cramped, machine-generated CSS into something a person can read, and it compresses a sprawling stylesheet down to the bytes that actually matter. The reason you reach for one is almost always that the CSS arrived in the wrong shape for what you are doing — a build tool dumped a single minified line and you need to inspect a specific rule, or a hand-written file ballooned and you want to trim it before shipping.

This page handles both directions with real engines. Format uses js-beautify’s css_beautify, which re-indents selectors and declarations predictably. Minify uses CSSO, which is a genuine structural optimiser rather than a whitespace stripper: it merges adjacent rules with identical declarations, folds longhand properties into shorthands, removes overridden declarations, and only then collapses the remaining whitespace. The result is typically smaller than what a naive compactor produces, and semantically equivalent to the input. That distinction matters when you care about every byte on the wire.

How to use it#

1. Paste your CSS into the CSS pane on the left. Sample loads a short stylesheet if you want to try the behaviour first.
2. Pick an Indent on the toolbar: 2, 4, or tab. Two spaces is the common modern convention; four is friendlier for reading dense files.
3. Click an action:
   • Format — re-indent and line-break through js-beautify. Selectors go on their own line, declarations align inside the braces.
   • Minify — run CSSO’s structural optimisation, then emit compact output. Comments are dropped, duplicate rules merge, longhands fold into shorthands where safe.
4. Read the result in the Output pane and use Copy to take it. Clear resets both panes.

If your input has an unterminated rule or a broken declaration, the status bar reports the error instead of guessing.

Key features#

• Format and minify are different engines. Beautify is js-beautify; minify is CSSO. Each does the one job it is good at, rather than one compromised routine trying to do both.
• Real optimisation on minify. CSSO restructures the stylesheet — merging .a { color: red } .b { color: red } into a shared rule, collapsing margin: 0 0 0 0 to margin: 0, removing a declaration that a later rule already overrides. Whitespace removal is the last step, not the only one.
• Three indent styles. 2 spaces, 4 spaces, or tabs, switched with one menu.
• Side-by-side, copy-ready. Input editable, output read-only with a one-click copy button.
• Strictly client-side. CSSO and js-beautify are bundled into the page and loaded only when you open this tool. Your stylesheet is processed in the browser and never uploaded.

Worked example#

A small stylesheet where two rules repeat work and a longhand could be shorter:

Input:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Click Format with 2 spaces:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

The repetition is now obvious — exactly what a formatter is for. Now click Minify on the same input and CSSO rewrites it structurally:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Three things happened at once. The four-value padding collapsed to one value because all four sides were equal; the four margin-* longhands folded into the margin shorthand; and the two color: #ff0000 rules merged into a single rule with a grouped selector (and the hex became the shorter red). A plain whitespace stripper would have kept every byte of redundancy — only a restructuring optimiser finds these wins.

FAQ#

Will minify change how my page looks?#

No, not when the input is valid CSS. CSSO only applies transformations that preserve the cascade: merging rules with identical declarations, folding longhands whose values are all the same, dropping declarations that a more specific or later rule overrides. If a transformation would be ambiguous, it is skipped. Format is purely cosmetic and never changes meaning.

Does minify keep my comments?#

No. Comments are removed during minification, including /* !important */-style banners. If you need a licence header or a build marker to survive, keep your commented source and re-insert the banner in your build pipeline after minifying.

Why is the minified output sometimes larger than my input?#

Almost always because the input was already minified. CSSO still has to parse and re-emit it, and on already-compact, already-optimised input there is nothing left to gain — the output is essentially the same size. Feed it hand-written or expanded CSS and the savings are real.

Is my CSS sent to a server?#

No. Both engines run in your browser. The libraries are loaded on demand from the page’s own bundle, so there is no network request carrying your stylesheet anywhere.