Loading...
Related:{ }JSON EditorMDMarkdown PreviewJSJS MinifierSVGSVG Minifier≡≡Find Duplicate Lines⟺Text DiffAaString Utilities.*Regex Tester

CSS Minifier Online — Compress & Optimize CSS Free

A free CSS minifier that strips whitespace, comments, and redundant characters from stylesheets to reduce file size without changing any visual behavior. Level 2 mode also shortens hex colors, removes zero-value units, and trims leading decimals for additional savings. Runs entirely in your browser — no uploads, no sign-up.

Features

  • Two optimization levels

    Level 1 is safe for all CSS: removes comments and whitespace only. Level 2 applies structural optimizations like shortening hex colors and stripping zero-value units.

  • Comment stripping

    Removes all /* block comments */ including license headers. If you need to preserve a license comment, manually strip Level 1 first and re-add the header.

  • Hex color shorthand

    Level 2 converts 6-digit hex colors to 3-digit shorthand where possible — e.g. #aabbcc becomes #abc — saving 3 bytes per occurrence.

  • Zero-value unit removal

    Converts 0px, 0em, 0rem, and other zero-value measurements to a bare 0, which is valid CSS and shorter.

How to minify CSS online

Compress any stylesheet in seconds without losing any visual behavior.

  1. Paste your CSSDrop your stylesheet into the left panel. Any valid CSS is accepted — plain CSS, SCSS output, Tailwind output, etc.
  2. Choose a levelSelect Level 1 for a safe whitespace-only pass, or Level 2 for deeper optimization including color shorthand and zero-unit removal.
  3. Click MinifyThe compressed output appears in the right panel along with byte counts and the percentage reduction.
  4. Copy the outputClick Copy to grab the minified CSS and deploy it to your CDN or inline it in your HTML.

Examples

Minify a typical ruleset

Input
.button {
  /* Primary action button */
  background-color: #aabbcc;
  padding: 0px 16px;
  margin: 0em;
  font-size: 14px;
  border-radius: 4px;
}
Output
.button{background-color:#abc;padding:0 16px;margin:0;font-size:14px;border-radius:4px}

Level 2 converted #aabbcc → #abc, 0px → 0, and 0em → 0, saving bytes without changing any styles.

Frequently Asked Questions

What is CSS minification?
CSS minification removes all characters that are not required for the browser to parse and apply the styles — spaces, tabs, newlines, and comments. The result is a single-line file that the browser interprets identically to the original but downloads faster.
What is the difference between Level 1 and Level 2?
Level 1 only removes whitespace and comments — it is always safe and never changes style values. Level 2 also transforms values: it shortens 6-digit hex colors to 3-digit equivalents, removes units from zero values (0px → 0), and strips leading zeros from decimals (0.5 → .5). All Level 2 transformations are valid CSS and change no visual output.
Will minification change how my page looks?
No. Minification only removes characters that have no effect on rendering — whitespace, comments, and redundant syntax. The computed styles applied to elements are identical before and after.
Can I use this on SCSS or Less output?
Yes. Compile your SCSS or Less to plain CSS first, then paste the compiled output here. The minifier works on any valid CSS regardless of its original source.
Should I minify CSS manually or use a build tool?
For production projects, use a build tool (Vite, Webpack, PostCSS with cssnano) to automate minification on every build. This online tool is useful for one-off files, debugging, or when you do not have a build pipeline available.
Does the tool handle vendor-prefixed properties?
Yes. The minifier treats -webkit-, -moz-, -ms-, and -o- prefixed properties the same as standard properties — it compresses whitespace around them without removing or reordering them.