CSS Minifier & Beautifier

Minify CSS for production or beautify for readability.

What It Does

This tool performs two complementary operations on CSS code. Minification strips all whitespace, comments, and redundant characters to produce the smallest possible file for production deployment. Beautification (or formatting) adds consistent indentation and line breaks to make compressed or messy CSS human-readable again — useful when inspecting third-party stylesheets or debugging minified output.

What Gets Removed During Minification

  • Whitespace and newlines between selectors and properties
  • CSS comments (/* ... */)
  • The last semicolon in a declaration block (browsers don't require it)
  • Spaces around :, {, and }
  • Quotes around unambiguous URL values and font names

Example

Original CSS (92 bytes):

.button {
  background-color: #0070f3; /* primary */
  color: #fff;
  padding: 8px 16px;
}

Minified (51 bytes):

.button{background-color:#0070f3;color:#fff;padding:8px 16px}

Tips

  • Always keep the original, unminified CSS in source control — never commit only the minified version.
  • Pair minification with gzip or Brotli compression on your server for the best transfer sizes.
  • Use source maps in development so browser DevTools can map minified styles back to the original lines.
  • For large projects, integrate cssnano or LightningCSS into your build pipeline rather than minifying manually.

Frequently Asked Questions

How much does CSS minification reduce file size?
Minification typically reduces CSS file size by 20–50%. Removing comments, whitespace, and unnecessary semicolons can shrink a 100 KB stylesheet to 60–80 KB, noticeably improving page load speed, especially on mobile connections.
Does minified CSS work the same as the original?
Yes. Minification is a lossless transformation — it only removes characters that have no effect on how the browser parses styles (whitespace, comments, redundant semicolons). The rendered output is identical.
What is the difference between minify and beautify?
Minify compresses CSS for production use by removing all unnecessary characters. Beautify (also called "prettify" or "format") does the opposite — it adds consistent indentation, line breaks, and spacing to make CSS easier to read and edit.
Should I minify CSS before or after adding vendor prefixes?
Add vendor prefixes first (e.g., using Autoprefixer), then minify. Minifying first can occasionally interfere with tooling that needs to parse the CSS structure. Most build pipelines run PostCSS → Autoprefixer → minification in that order.
Can I minify CSS in my build pipeline instead of manually?
Yes. Tools like cssnano (PostCSS plugin), LightningCSS, esbuild, and Vite all minify CSS automatically during build. Use this online tool for quick one-off checks or when you need to inspect the minified output without setting up a full pipeline.