About CSS Minifier

Minifies CSS through four toggleable regex-based optimizations: comment removal, whitespace stripping, empty rule deletion, and value optimization (0px → 0, leading zero removal on decimals, hex color shorthand like #AABBCC → #ABC). Also includes a beautify mode that re-indents compressed CSS with proper formatting. Upload a .css file or paste code directly. Shows original size, minified size, bytes saved, and reduction percentage.

• [^}]*{\\s*}
• Comment removal strips all /* ... */ block comments via regex
• Whitespace optimization collapses multiple spaces, removes spaces around braces, colons, semicolons, and commas, and trims leading/trailing whitespace
• Empty rule removal catches selectors with no declarations: `[^}]*{\\s*}` patterns
• Value optimization: replaces 0px/0em/0rem/etc. with plain 0, removes leading zeros from decimals (.5 instead of 0.5), and shortens hex colors (#AABBCC → #ABC)
• Beautify mode re-expands minified CSS with proper indentation and line breaks for readability
• File upload restricted to .css files; shows original vs. minified size comparison with percentage reduction

Frequently Asked Questions

How does this compare to cssnano or PostCSS?

This tool handles the basics—comment/whitespace removal and simple value optimizations—using regex. Build tools like cssnano go further: merging duplicate rules, rewriting shorthand properties, discarding overridden declarations, and tree-shaking unused styles. For quick one-off minification, this works fine. For production build pipelines, use cssnano or Lightning CSS.

Can the value optimization break anything?

The 0px → 0 replacement is safe because zero is zero in any unit. The hex shorthand only fires on doubled characters (#AABBCC → #ABC), which is lossless. The leading-zero removal (0.5 → .5) is valid CSS. In practice, these optimizations are safe—but if you’re nervous, toggle them off individually.