CSS Minifier

Key features

• A character-level scanner tracks string and comment state, so content:"hello; world" and url("data:…") survive exactly as written.
• Comments are stripped, whitespace collapses, spaces around punctuation disappear and the final semicolon before each closing brace is dropped.
• Optional safe optimizations: shorten #AABBCC → #ABC when pairs repeat, lowercase hex colors, and remove zero lengths (0px → 0) with strict boundaries so 10px never matches.
• Unbalanced braces are detected and reported as an amber warning — you still get output, but you also get told the stylesheet may be truncated.
• Four live stat tiles: original bytes, minified bytes, saved bytes and saving percentage.

How it works

1. 1

   Paste your CSS

   A whole stylesheet, a <style> block's contents, or a single rule — the minifier treats them all the same. Processing is live with a short debounce.

2. 2

   Toggle the optimizations

   Hex shortening, lowercase hex, zero-unit removal and last-semicolon removal are each a switch, so you can match your build pipeline's exact behaviour.

3. 3

   Copy or download

   Copy the minified CSS or save it as minified.css. The tiles show precisely how many bytes you reclaimed.

Tips for better results

• 💡Hex shortening only fires when both pairs repeat (#AABBCC), and skips values that directly precede a { to protect ID selectors like #aabbcc { }.
• 💡Zero-unit removal covers px, em, rem and % — durations like 0s and 0ms are intentionally left alone because unitless zero is invalid there.
• 💡If the warning says a block is unclosed, count your braces in the original: the minifier never guesses where a missing } should go.

Frequently asked questions