What is CSS minification?

CSS minification removes all characters from a stylesheet that are not required for rendering — whitespace, comments, extra semicolons, and optional quotation marks. The result is identical CSS in a fraction of the file size.

What minifiers remove

Whitespace — spaces, tabs, newlines between selectors and declarations
Comments — both /* block */ and // line comments
Trailing semicolons — the last declaration in a block does not need a semicolon
Optional units — 0px becomes 0
Colors — #FF6600 becomes #F60, rgba(0,0,0,0) becomes transparent

Before and after

/* Before: readable but bloated */
.container {
  margin: 0 auto;
  padding: 20px 15px;
  background-color: #ffffff;
  border-radius: 4px;
}

/* After: minified */
.container{margin:0 auto;padding:20px 15px;background-color:#fff;border-radius:4px}

Bundle size impact

A typical Bootstrap stylesheet shrinks from around 200 KB to 160 KB after minification. Combined with gzip compression, the savings are even greater — often 70-80% of the original size.

Minify your CSS online

Use the CSS minifier to compress your stylesheets instantly. It also handles JavaScript and HTML minification in the same interface.