CSS Minifier

The CSS Minifier compresses stylesheets safely by tokenizing first: quoted strings and url(...) bodies are preserved verbatim, so a font name with spaces or a data URI inside url() is never corrupted while everything around it shrinks. Three independent switches control the aggressiveness — Strip comments removes /* */ blocks, Collapse whitespace flattens runs of spaces and removes them around { } : ; , punctuation, and Drop trailing semicolons deletes the final ; before each closing brace. On top of that, empty rules like .unused { } are removed automatically, and the pass repeats until no empty blocks remain so vacuous @media wrappers collapse too. A realistic sample stylesheet — a button component with comments, an @media query, and a deliberately empty rule — demonstrates every behavior when you hit Load sample. The stat strip reports original and minified byte sizes plus the absolute and percentage savings, so you can quantify the win before shipping, and the result downloads as styles.min.css. Perfect for squeezing a style bundle before deployment or comparing against a build-tool output.

1. 1

   Paste your stylesheet into the CSS input textarea, or click Load sample.

2. 2

   Choose your switches: Strip comments, Collapse whitespace, Drop trailing semicolons.

3. 3

   Watch the Minified CSS result box update live.

4. 4

   Read the Original, Minified, Saved, and Savings stats to quantify the result.

5. 5

   Download the output as styles.min.css.

• Shrinking a stylesheet before inlining it into a critical-path HTML response.
• Checking how much of your CSS is comments and whitespace before a build.
• Preparing a compact style block for an email or a widget embed.
• Comparing hand-minified output against a bundler's minifier for sanity.
• Reducing payload size for a demo or prototype without a build step.
• Cleaning generated CSS from design tools before committing it.

• Keep Strip comments on for production, but leave it off when the sheet contains license headers you must retain.
• Never minify your only copy — keep the readable source and treat the output as a build artifact.
• Verify the output renders identically in a browser after aggressive minification.
• Watch the Savings stat: unusually low savings often means the input was already minified.
• url() content and quoted strings are preserved verbatim — trust that, but spot-check data URIs after minifying.
• Remember empty-rule removal is always on; rules you plan to fill later will vanish.

• Load the sample first — it shows comments, an empty rule, an @media block, and string preservation in one go.
• Toggle switches one at a time to see each transformation's contribution to the savings.
• Use the output as a baseline when tuning a bundler's CSS minifier settings.
• Download styles.min.css instead of copying, so quoting and braces survive intact.