CSS Minifier
Context-aware CSS minifier preserves calc() spaces and string literals. Aggressive mode strips zero units, shortens hex. Free, offline, client-side, instant.
Context-aware minifier that respects string literals and calc() spaces - most CSS minifiers break calc(100% - 20px) by collapsing the space around -. Aggressive mode strips zero units and shortens hex. Preserve license comments for /*! ... */ headers.
How to Use CSS Minifier
- Paste CSS into the input pane, or click Load Sample to see what aggressive mode does.
- Optionally upload a .css file (up to 5 MB).
- Toggle Preserve license comments if you need
/*! ... */headers (e.g. MIT/BSD copyright lines) to survive. - Toggle Aggressive for zero-unit stripping (
0px→0), hex shorthand (#ffffff→#fff), andrgb()→ hex conversion. - Output appears live; the stats card shows bytes saved, % reduction, and an estimated gzipped size.
- Copy the output or download
styles.min.css.
Frequently Asked Questions
How much does minified CSS actually speed up a page?
It depends on stylesheet size, but the win is real and free. Minification alone typically removes 20 to 40 percent of bytes; combined with gzip or brotli the total transfer drops 80 percent or more versus the raw file. For a typical 150 KB stylesheet that is roughly 120 KB saved per first-time visitor, which matters most on mobile connections and for Largest Contentful Paint, since CSS blocks rendering until it arrives and parses.
Why does calc() break in naive minifiers?
The minifier sees calc(100% - 20px) and applies “remove spaces around operators”. For { and } that’s fine. But +, -, *, / inside calc() REQUIRE surrounding whitespace per CSS spec – calc(100%-20px) is invalid. This tool tracks parentheses depth and never collapses whitespace inside parens.
What’s the “preserve license comments” toggle?
CSS files often start with /*! Copyright (c) 2026 ... */. The ! after /* is the convention (borrowed from UglifyJS) signaling “do not strip me”. When the toggle is on, the minifier keeps any comment whose first character is ! and strips all others.
How accurate is the gzipped-size estimate?
Roughly 70-80% accurate. The tool uses a heuristic based on 4-gram uniqueness – highly-repetitive CSS (lots of vendor prefixes, similar selectors) compresses better than CSS with diverse content. For exact gzipped sizes, run your output through gzip -9 on the command line. The estimate is meant to give a ballpark – typical CSS gzips to 20-60% of its minified size.
What does the aggressive mode actually do?
Three transforms. Zero units: 0px, 0em, 0%, etc. become just 0 (saves 2-3 bytes per occurrence). Hex shorthand: #ffffff → #fff, #aabbcc → #abc (only when each pair has matching digits). rgb→hex: rgb(255, 255, 255) → #fff (only basic rgb, never rgba). Safe in 99% of cases – but always test critical paths.
Should I minify before gzip – or does gzip do it all?
Both. Minifying first gives gzip more head-start: minified CSS gzips to a smaller absolute size than unminified CSS gzipped. Rough rule: minify saves ~30% raw, then gzip saves another ~70% of that. Total wire size: ~10-15% of the unminified file.
Can I reverse the minification?
A CSS beautifier can restore indentation and line breaks. But comments (except preserved license headers) and original formatting nuances are gone forever – minification is one-way. Always keep your source files.
Does this handle CSS variables, nested CSS, container queries?
Yes for variables (--foo: red) and @container queries – they’re regular CSS syntax. CSS Nesting (.btn { &:hover { ... } }) is also fine – the minifier treats it as normal selectors. The & nesting selector survives untouched.
What about CSS-in-JS / Tailwind output?
Tailwind already minifies its output via its own engine (--minify flag). Re-minifying through this tool adds negligible savings (maybe 1-2%). For CSS-in-JS that ships unminified at runtime (e.g. styled-components dev mode), pre-minifying makes no sense – the runtime generates it.
Is my data secure?
Yes. Your CSS – uploaded files, pasted code, all of it – stays in your browser. No part of your stylesheet is uploaded.