CSS Minifier

About the CSS Minifier

The CSS you write is full of things browsers do not need: comments, indentation, line breaks, long color codes and repeated rules. The CSS Minifier strips all of that out and gives you the smallest stylesheet that still looks exactly the same in the browser.

It uses csso, a well-tested CSS optimizer that does more than remove whitespace. It shortens colors like #ffffff to #fff, writes 0px as 0 and bold as 700, combines margin: 0 0 0 0 into margin:0, drops declarations that are overridden later in the same rule, and can merge rules that share the same styles.

The status line shows how much smaller the result is, both raw and gzipped, which is closer to what visitors actually download. If the CSS has syntax errors, the minifier tells you where. It runs in your browser, so your stylesheet never leaves your device.

How to use it

1. Add your CSSPaste a stylesheet, drop a .css file onto the box, or use Open file. Sample loads a short example with comments and repeated colors.
2. Choose the options"Merge and reorder rules" lets csso combine and move rules for a smaller result. "Keep /*! license comments */" keeps comments that start with /*!.
3. Check the status lineIt shows the percentage saved, the size before and after, and the gzipped size. Errors in the CSS appear here with their line and column.
4. Review the outputThe minified CSS appears on the right. With merging on, compare it with the original if your page relies on rule order in unusual ways.
5. Copy or downloadCopy the result or download it as styles.min.css.

Key features

Examples

Minifying the sample

The Sample button loads 294 bytes of CSS:

/* Card component */
.card {
  color: #ff0000;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
}

.card  .title {
  font-weight: bold;
  color: #FF0000;
}

.button { color: #ff0000; }

/*! Theme v2 | MIT license */
.button:hover { color: rgb(0, 0, 0); }

With both options on, the status line reads 43% smaller and 294 B → 169 B · 154 B gzipped:

.card{margin:0;padding:10px;background-color:#fff}.card .title{font-weight:700;color:red}.button,.card{color:red}
/*! Theme v2 | MIT license */
.button:hover{color:#000}

The color of .card moved into a shared rule with .button, the normal comment is gone and the license comment is kept.

What the options change

Without merging, csso keeps every rule where it was, so margin:0 0 0 0 and padding:10px 10px 10px 10px are not shortened either.

Small changes that add up

Merging rules

This CSS:

h1 { color: red; }
h2 { color: red; }
h1 { margin: 0; }

becomes h1,h2{color:red}h1{margin:0}, 28 bytes instead of 55. With merging off, it is h1{color:red}h2{color:red}h1{margin:0}.

When the CSS has an error

For .a { color red; } the status line says Line 1, column 12: Colon is expected, and the broken rule is left out of the output. If a closing brace is missing, or the CSS uses nesting such as .card { & .title { ... } }, nothing is minified, because those rules would otherwise be lost.

Tips

• Keep your readable CSS as the original and minify a copy for production. Minified CSS is hard to edit, and comments cannot be recovered.
• Look at the gzipped size, not just the raw size. Servers usually compress CSS, so the gzipped number is closer to what visitors download.
• If your page looks different after minifying, turn off "Merge and reorder rules". The output gets a little larger, but the order of your rules stays exactly as written.
• Leave "Keep /*! license comments */" on for CSS from open-source projects. Their licenses usually require the notice to stay in the file.
• To read minified CSS from another site, paste it into the CSS Beautifier to get it back in indented form.

Common mistakes and limits

• Minifying CSS that uses nestingcsso does not support native CSS nesting, such as & .title inside .card. Rather than drop those rules, the tool refuses to minify them. Flatten nested rules first, or minify with your build tool.
• Ignoring error messagesWhen the status line shows an error, rules that could not be read may be missing from the output. Fix the CSS and check that the status line shows the size saved.
• Editing the minified fileChanges made to minified CSS are easy to get wrong and will be lost when you minify the original again. Always edit the source.
• Expecting a big saving on tidy CSSTidy CSS without comments or repeated rules shrinks much less than the sample does. The gzipped size often matters more than the minified size.
• Losing comments you needOnly comments that start with /*! are kept. Comments used as markers by other tools, such as /* purgecss start ignore */, are removed.

Frequently asked questions