CSS Minifier & Beautifier

Minify CSS to reduce file size, or beautify minified CSS for readability. Instant, browser-based.

294 B → 204 B↓ 31% smaller

CSS Input

Minified Output

body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:#ffffff;color:#333333}.container{max-width:1200px;margin:0 auto;padding:0 16px}h1,h2,h3{font-weight:bold;line-height:1.2;margin-top:0}

Frequently Asked Questions

Is my CSS stored on your servers?

No. All minification is done in your browser using JavaScript. Your CSS is never sent to any server.

What does CSS minification do?

Minification removes comments, unnecessary whitespace, trailing semicolons, and redundant characters — reducing file size without changing how the CSS works.

How much can CSS minification reduce file size?

Typically 20–40% smaller, depending on how much whitespace and comments the original has. Combined with Gzip/Brotli compression by your server, the savings are even greater.

Can I beautify / format CSS too?

Yes. Use the Format button to prettify minified or messy CSS with consistent indentation and spacing.

What CSS Minification Removes

CSS minification is a lossless transformation: the rendered result in the browser is identical. The minifier strips everything the browser does not need to parse the stylesheet:

  • Whitespace and newlines — indentation, blank lines, spaces around : and {}.
  • Comments — /* ... */ blocks (except /*! ... */ license comments).
  • Trailing semicolons — the last declaration in a rule block doesn't need a semicolon.
  • Redundant units — 0px → 0.
  • Longhand properties — some minifiers merge margin-top/right/bottom/left into shorthand margin.

CSS Optimization Pipeline

In a modern web project, CSS minification is one step in a multi-stage optimization pipeline. The typical order is:

  1. Autoprefixer — adds vendor prefixes (-webkit-) based on browser targets.
  2. PurgeCSS / tree-shaking — removes CSS rules not used in your HTML/JS (can reduce Tailwind from 3 MB to 10 KB).
  3. Minification — strips whitespace and comments from the remaining CSS.
  4. Gzip / Brotli compression — server compresses the minified file for transfer. Brotli saves an additional 15–20% over Gzip on CSS.

Minification in Build Tools

  • Vite — uses lightningcss (Rust) or cssnano automatically in production builds.
  • Next.js — built-in CSS minification via SWC / PostCSS in next build.
  • webpack — css-minimizer-webpack-plugin wraps cssnano.
  • esbuild — native --minify flag handles CSS minification at near-instantaneous speed.