CSS Minifier

Shrink a stylesheet for production. Beyond stripping whitespace, it merges duplicate rules and shortens values like #ffffff → #fff.

Input · drop a file

/* Ticket component */
.ticket {
  display: inline-flex;
  padding: 8px 16px 8px 16px;
  background-color: #ffffff;
  margin: 0px;
}

.ticket .no {
  font-weight: bold;
}

.ticket .no {
  color: #000000;
}

Output

How a minifier shrinks code, pass by pass

Minifiers don’t zip your file — they rewrite it into the smallest code that behaves identically. Step through what a JavaScript minifier like Terser does to one small function. CSS and HTML minifiers follow the same idea with their own rules.

/* Total price of a ticket */
function ticketTotal(garments) {
  let total = 0;
  for (const garment of garments) {
    total = total + garment.price;
  }
  return total;
}

Readable source with a comment, indentation and descriptive names.

172 bytes · 0% smaller than the original

How CSS minification works

This minifier uses CSSO, which does more than strip whitespace:

Removes comments and whitespace.
Shortens colours (#ffffff → #fff, white → #fff) and zeros (0px → 0).
Collapses shorthand (8px 16px 8px 16px → 8px 16px).
Merges rules with the same selector and removes overridden declarations.

Comments beginning with /*! (licence headers) are kept.

Questions

How much smaller will my CSS get?

Typically 15–40% for hand-written CSS before gzip. Heavily commented files save more.

Can minification break my CSS?

CSSO only applies transformations that keep the cascade the same. Invalid CSS may be dropped, so validate odd-looking output.