CSS Minifier

Minify CSS with an honest size report — raw, minified and gzip bytes — entirely on this device.

Plain comments and whitespace go; rule order stays unless Restructure is on.

Keep /*! license commentsRestructure (aggressive)

Off removes every comment, including /*! license banners. Merges overlapping rules for extra savings — cascade order can change. Verify the output.

CSSInput — paste CSS here

Output — minified CSS

Size report

Original: —
Minified: —
Gzip: —
Saved: —

0 B · 0 lines · CSS

Press ? for shortcuts

Do it offline:$ npx csso-cli styles.css --output styles.min.css

How to use it

Paste CSS or drop a .css file up to 5 MB — small sheets minify as you type; big ones move to a background thread.
Keep or strip /*! license comments, and turn on Restructure only after reading its cascade warning.
Check the report card: original, minified and gzip bytes, percent saved, and a rule count when Restructure ran.
Copy or download the minified sheet, or share the state as a link carrying nothing you did not put in it.

Paste a stylesheet and the compressed version appears as you type, beside a report card stating raw bytes, minified bytes, gzip weight and percentage saved. License comments marked /*! survive by default, broken declarations drop with a per-line warning, and nested CSS is refused rather than silently deleted. Everything runs on this device — no upload, no account.

Examples

/* header */
:root {
  --brand: #0066cc;
}

.site-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background-color: #ffffff;
}

.site-header a:hover {
  color: var(--brand);
  text-decoration: underline;
}

:root{--brand:#0066cc}.site-header{display:flex;align-items:center;padding:16px 24px;background-color:#fff}.site-header a:hover{color:var(--brand);text-decoration:underline}

A hand-written header sheet: the report card reads 231 B → 173 B · saved 25%, and the result weighs 152 B after gzip (a Node zlib figure — a browser CompressionStream may land a few bytes away). The literal #ffffff shortens to #fff; the custom-property #0066cc passes through untouched.

.btn {
  color: #ff0000;
  padding: 8px 16px;
}

.btn {
  border-radius: 4px;
}

.btn{color:red;padding:8px 16px;border-radius:4px}

With Restructure on, the duplicate .btn blocks merge and the rule count drops from 2 to 1 — 80 B → 50 B · saved 38%. A default run keeps both blocks, at 55 B.

.card{margin:0;padding:12px}

.card{margin:0;padding:12px}

In and out are the same 28 bytes, so the status says Already minified — saved 0 bytes instead of promising a gain.

.nav {
  color: #333;
  font-weight bold;
  margin: 0;
}

.nav{color:#333;margin:0}

The colon missing after font-weight makes that declaration unreadable, so it is dropped with a warning — Unparseable CSS at line 3, column 3 was removed: "font-weight bold;" — and the good declarations minify normally.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

Restructure is off for a reason

The aggressive pass merges rules and shares declarations across the sheet. Where equal-specificity selectors match one element, source order picks the winner — moving rules can change it, so the option stays opt-in and worth a diff. Its readout reports real counts: restructuring can raise the rule count while still shrinking bytes.

Nested CSS is refused, never deleted

csso 5, the compressor underneath, predates native nesting: fed a rule holding & selectors or an inner @media block, it silently deletes the nested part. This page walks the parse tree first and refuses with a typed error naming the line and column, input unchanged. Flatten nesting in your build, then minify here.

Custom properties pass through byte-for-byte

Everything after --name: is an arbitrary token stream, so no color shortening or whitespace collapsing happens inside it: :root{--focus-shadow:0 0 0 2px rgba(0, 102, 204, 0.4)} keeps its double space exactly as written. Only whitespace at the value's edges is trimmed.

When half the sheet is one embedded image

Base64 payloads hold no whitespace to strip, so a sheet that is mostly data: URIs barely shrinks. Once embedded URIs cross half of the result, a note states the share — 94% of the minified output is embedded data: URIs — a hint to move them into cacheable files.

Gzip figures depend on the compressor

The Gzip cell is measured in your browser; figures printed on this page come from Node's zlib. Different compressors, levels and headers land a few bytes apart — treat any gzip number as a close estimate, not a contract.

Two comment modes, one default

Comments opening /*! are the license-banner convention: the default keeps them and strips the rest; strip-all removes those too, turning a banner-only file into 0 bytes — an honest 100% saved. A plain /* comment survives neither mode.

Common errors

CSS nesting is not supported: 1 nested construct (a nested rule or at-rule inside a style rule), at line 3, column 3. Minifying would silently delete it, so the input was left unchanged.: Raised by a rule with an & .title block inside it; the same refusal covers @media or @container nested in a rule. csso would drop these without a trace — Jump to error lands on the line.
Unparseable CSS at line 3, column 3 was removed: "font-weight bold;": A missing colon makes one declaration unreadable; csso drops that segment, and the warning names the line, column and removed text. Check that position if the removal was not intended.
This tool minifies up to 5MB of CSS; beyond that, try the CLI: npx csso-cli styles.css --output styles.min.css: The page declines an oversized paste rather than minifying a slice, and your text stays in the editor. The suggested command runs the same csso compressor on your machine.
CSS minification failed: Maximum call stack size exceeded: The catch-all when the compressor itself throws — reproduced with tens of thousands of nested at-rules. Nothing is emitted; the input stays put.

FAQ

Is minified CSS faster?

Smaller, which is what counts: stylesheets block rendering, so every byte removed is a byte the browser does not fetch before first paint. The header-sheet example above saves 25% before compression; sheets with long comments often save more.

Minify vs gzip — do I need both?

They remove different things. Gzip is reversible, so it must keep comments and long identifiers, merely encoding them tighter; minification deletes what a browser never needs before your server compresses the rest. The Gzip cell shows the combined result.

Is it safe to minify CSS?

In the default mode, yes by construction: declarations are rewritten in place — colors shortened, whitespace removed — and rules keep their order. Two exceptions: Restructure merges and moves rules, which matters when equal-specificity selectors compete, and nested CSS is refused instead of corrupted.

Keyboard shortcuts

⌘/Ctrl + Enter: Minify the current input again, options included.
⌘/Ctrl + S: Download the minified output as a .css file — overrides the browser's save-page shortcut.
⌘/Ctrl + C: With no selection, copies the whole minified output; a real selection copies normally.
⌘/Ctrl + Shift + C: Copy the whole output no matter what is selected.
t: Toggle the theme — inactive while typing or composing with an IME.
? or ⌘/Ctrl + /: Open the help dialog listing these bindings and their browser conflicts.
Esc: Close the topmost dialog; it never clears the input.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

csso — CSS minifier with structural optimizations (GitHub) · MDN Web Docs — Minification (Glossary)

Last reviewed: 2026-08-05