CSS Minifier Online — Compress & Beautify CSS Instantly

CSS files grow quickly during development. Minifying CSS removes all unnecessary characters — whitespace, comments, redundant semicolons — to reduce file size and improve page load speed.

What Is CSS Minification?

Minification removes every character that isn't required for the CSS to function: spaces, newlines, comments, and sometimes shorthand property optimizations. The result is functionally identical but much smaller.

Before vs After Minification

/* Before: 180 bytes */
.button {
  background-color: #6366f1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
}

/* After: 72 bytes */
.button{background-color:#6366f1;color:white;padding:12px 24px;border-radius:8px;font-weight:700}

Typical savings: 20–50% for most stylesheets.

Why Minify CSS?

• Faster load times: Smaller files transfer faster, especially on mobile
• Better Core Web Vitals: Reduces render-blocking resource size
• Lower bandwidth costs: CDN and server costs scale with bytes transferred
• Gzip synergy: Minified CSS compresses even better with gzip/brotli

CSS Minification in Build Tools

# Vite (built-in, enabled in production)
vite build

# webpack with css-minimizer-webpack-plugin
npm install css-minimizer-webpack-plugin

# PostCSS + cssnano
npm install cssnano postcss-cli
npx postcss style.css --use cssnano -o style.min.css

# Node.js (clean-css)
npm install clean-css-cli -g
cleancss -o style.min.css style.css