CSS Minifier
Shrink CSS by stripping comments, collapsing whitespace, and shortening hex colours.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css minifier
- Paste your CSS stylesheet into the input area.
- Press Minify to strip comments, collapse whitespace, and shorten colours.
- Read the before/after byte counts in the result panel.
- Copy the minified CSS or hit Reset to clear and try another file.
About this css minifier
The CSS minifier removes the bytes a browser does not need. It strips /* ... */ comments, collapses runs of whitespace to a single space, removes the whitespace around braces, colons, semicolons, commas, and child/sibling combinators, drops the final semicolon before each closing brace, and shortens lowercase six-digit hex colours like #aabbcc to the three-digit form #abc whenever the channels repeat. Zero-length dimensions such as 0px, 0em, 0rem, and 0% collapse to a plain 0 wherever it is safe to do so.
Quoted strings are preserved exactly so URL paths, font names with spaces, and content: rules survive the round trip. Because the minifier runs in your browser, you can paste production stylesheets, design tokens, and partial component files without any of it leaving your machine. The result is a single-line stylesheet you can drop straight into a <style> tag, a CMS field, or an inlined critical-CSS block.
For example, the input ".btn { color: #FFFFFF; padding: 0px 12px; /* primary */ }" minifies to ".btn{color:#fff;padding:0 12px}" — 56 bytes down to 30 bytes, with the comment removed, the hex shortened, and the zero unit dropped.
FAQ
- Will the minifier break my CSS?
- It only removes optional whitespace, comments, and redundant characters that the CSS grammar allows the browser to recover from. Selectors, properties, values, strings, and URLs are preserved.
- What about CSS custom properties and calc()?
- Custom properties (--foo) and calc() expressions are preserved. The minifier keeps the whitespace inside calc() that is required by the spec.
- Does it support modern selectors like :has() and @container?
- Yes. The minifier is selector-agnostic — it does not parse selector grammars beyond skipping whitespace, so new at-rules and pseudo-classes work the same as classic ones.
- How accurate is the gzipped estimate?
- It is a rough heuristic (about 35% of the raw byte count) that approximates real gzip output for typical minified CSS. Use a build pipeline if you need a precise compressed size.
- Is my stylesheet uploaded anywhere?
- No. The CSS minifier runs entirely in your browser.
- Why is my hex colour not shortened?
- Only six-digit hex colours with matching channel pairs (like #aabbcc) can be shortened to three digits without changing the rendered colour. Eight-digit colours with alpha and three-digit colours are left as-is.