What minifying actually removes
CSS ignores most whitespace, so every indent, line break, and space around a colon is a byte you are paying to ship without the browser caring. A minifier deletes exactly those bytes and nothing else: comments, redundant whitespace, the final semicolon before a closing brace, and the unit on a zero value. The parsed result is identical, which is what makes it safe.
Beyond whitespace there are a few lossless rewrites worth taking.#aabbccis the same colour as#abc, three bytes cheaper.rgb(255, 255, 255)becomes#fff. A leading zero in0.5is optional. Expect 20 to 35% on hand-written CSS, less on anything a build tool has already touched.
Four things that break naive minifiers
Minifying CSS looks like a job for a few regular expressions, and it is not. Four cases defeat that approach, and all four appear in real stylesheets.
calc() needs its spaces. The grammar requires whitespace around+and-insidecalc(), socalc(100%-20px)is not valid CSS and the declaration is dropped entirely. This is the most common way a minified layout silently collapses.
Data URIs contain everything. A base64-encoded SVG insideurl()routinely contains semicolons, commas, and slashes. Treat any of those as CSS punctuation and the image is corrupted.
Strings are opaque. Acontentvalue can hold braces, semicolons, and even something that looks exactly like a comment. None of it may be rewritten.
Zero is not always unitless. Dropping the unit from0pxis safe. Dropping it from0sin a transition is not, because some engines reject a bare zero where a time is expected. This tool keeps time units.
Minification versus compression
These are different tools solving the same problem at different layers, and you want both. Minification is a source transform: it deletes bytes permanently. Compression is a transport encoding: gzip or Brotli shrinks the file for transfer and the browser expands it on arrival.
They stack, but not linearly. Gzip is excellent at collapsing repetition, and the indentation a minifier strips is highly repetitive, so it was already nearly free over the wire. What minification really wins is parse time and the uncompressed size the browser holds in memory. A file that is 30% smaller before gzip might only be 8% smaller after it, and that is still worth having.
Doing it in your build
# Next.js, Vite, and webpack all minify CSS in
# production builds by default — nothing to configure.
# Standalone, via PostCSS
npx postcss styles.css --use cssnano -o styles.min.css
# Lightning CSS, the fastest current option
npx lightningcss --minify styles.css -o styles.min.cssUse this page for the one-off: a snippet from a tutorial, a legacy stylesheet with no build step, or simply to see what a file costs before and after. For anything you ship on a schedule, put it in the pipeline so it happens without you remembering.
Frequently asked questions
Will minifying break my stylesheet?+
It should not. This minifier only removes bytes the CSS grammar treats as optional, and it walks the file character by character so strings, data URIs, and calc() expressions are left untouched. Nothing is reordered and no properties are merged.
Why are the spaces in calc() still there?+
Because they are required. The CSS grammar needs whitespace around the + and - operators inside calc(), clamp(), min(), and max(). Removing them is the single most common way a regex-based minifier silently breaks a layout.
How much smaller will my CSS get?+
Typically 20 to 35% for hand-written CSS, depending on how heavily it is commented and indented. Already-processed output from a build tool will compress much less. Gzip or Brotli on your server then saves substantially more on top.
Are my license comments preserved?+
Yes, if they use the /*! marker, which is the convention every major minifier respects. Ordinary /* comments */ are removed. Turn the option off to strip everything.
Should I minify by hand or in my build?+
In your build, for anything you ship regularly. Next.js, Vite, and webpack all minify CSS in production by default. This tool is for the one-off: a snippet, a legacy file, or checking what a stylesheet actually costs.