How much does CSS minification save?

Typically 15–30% for hand-formatted CSS; 5–10% for already-compact build output. Gzip compresses the minified file further on top of that.

Comments, whitespace between selectors and declarations, trailing semicolons, optional quotes around URL values, and leading zeros in 0.5em-style lengths. Character content inside url() and content: is preserved.

Is the minified CSS still readable?

No — it's a single dense line. Use the CSS Formatter or Beautifier to re-expand it for editing.

Will it break vendor prefixes?

No. Minification is purely syntactic; -webkit-, -moz-, and -ms- prefixes are treated as normal properties and kept untouched.

Minify CSS | DevTools Surf

DevTools Surf

Example: Minify CSS

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

Output

.container{max-width:1200px;margin:0 auto;padding:0 1rem;}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;}

About Minify CSS

Minify CSS by removing whitespace and comments. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

Frontend devs reducing CSS bundle size for production builds
Performance engineers optimizing Core Web Vitals scores
DevOps engineers adding CSS minification to CI/CD build pipelines
Mobile web developers minimizing stylesheets for 3G network users

Tips

Remove comments and whitespace together for maximum file reduction
Test that all media queries survive minification intact
Compare rendered pages before and after to catch minification bugs

Fun Facts

CSS was proposed by Hakon Wium Lie on October 10, 1994, making it one of the oldest web standards still in active use.
CSS minification typically reduces file size by 15-25%, and major sites like Facebook save megabytes of bandwidth daily through it.
CSSNano, one of the most popular CSS minifiers, can perform over 30 different optimization transformations on a single file.

FAQ

How much does CSS minification save?: Typically 15–30% for hand-formatted CSS; 5–10% for already-compact build output. Gzip compresses the minified file further on top of that.
What gets removed?: Comments, whitespace between selectors and declarations, trailing semicolons, optional quotes around URL values, and leading zeros in 0.5em-style lengths. Character content inside url() and content: is preserved.
Is the minified CSS still readable?: No — it's a single dense line. Use the CSS Formatter or Beautifier to re-expand it for editing.
Will it break vendor prefixes?: No. Minification is purely syntactic; -webkit-, -moz-, and -ms- prefixes are treated as normal properties and kept untouched.

Related CSS Tools

CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus Stylus to CSS