CSS Minifier

Input CSS 0 chars

Minified CSS

0 chars

What This Tool Does

The CSS Minifier reduces redundant whitespace and removes comments outside protected values. Strings, escapes, function contents, attribute selectors, and custom-property values are preserved. Compression varies with the source; this conservative pass does not perform aggressive value rewrites.

It runs in your browser using a small JavaScript function. Your code never reaches a server. The before-and-after panels stay visible side by side so you can verify the output looks right, and the stats panel shows the exact byte savings.

This is the production-deployment counterpart to the CSS Beautifier: develop with beautified, readable CSS; ship the minified version. A good build pipeline does this automatically with esbuild, PostCSS, or your bundler — this tool is for the cases where you don't have that set up, or you need to minify a single file quickly.

A Worked Example

Take this hand-written CSS:

/* Site header */ .header { background-color: #ffffff; padding: 20px 0; border-bottom: 1px solid #e5e7eb; } .header h1 { font-size: 24px; color: #111827; }

After minification it becomes:

.header{background-color: #ffffff;padding: 20px 0;border-bottom: 1px solid #e5e7eb;}.header h1{font-size: 24px;color: #111827;}

In this example, indentation and the header comment are removed; values and trailing semicolons are retained. Check the stats for actual savings and test the output before publishing.

Why Minify CSS?

Faster page loads. Smaller files reach the browser faster, especially over slow mobile connections. CSS is render-blocking by default — until the browser has it, the page can't paint. Every kilobyte you save shortens the time to first paint.

Less bandwidth. On a high-traffic site, the bytes add up. A 50 KB stylesheet served a million times a month is 50 GB of bandwidth; minified to 35 KB it's 35 GB. Real money on metered hosting plans.

Better Core Web Vitals. Largest Contentful Paint and First Contentful Paint both improve when render-blocking resources get smaller. Both are direct Google ranking signals.

Important caveat: if your hosting serves CSS with gzip or brotli compression enabled (most do — check by inspecting the Content-Encoding header), the gains from minification are smaller than the raw byte difference suggests. Gzip is already removing most of the redundancy that minification removes. Minification still helps, but the practical savings on the wire are typically 5–15%, not 30%.

Step-by-Step

Paste your CSS

Any size — small snippet or full stylesheet, both work.

Click Minify CSS

Or press Ctrl + Enter from the input box. Minified output appears in the right panel.

Check the stats

Original size, minified size, bytes saved, and percent reduction appear below.

Copy and deploy

Click Copy to grab the minified version. Replace the contents of your production .min.css file or paste into your build output.

What the Minifier Will and Won't Do

Will strip: Redundant whitespace outside strings, functions, attribute selectors, escapes, and custom-property values. Comments outside protected values are removed; an empty /**/ is retained when needed to separate tokens. Comments inside protected values are kept. Trailing semicolons are retained.

Won't change: selectors, property names, values, colour formats, units, or the order of rules. color: #ffffff stays color: #ffffff — same value, same six characters. !important stays !important.

Won't fix: syntax errors, duplicate selectors, unused styles, vendor prefix issues, or browser compatibility. The minifier assumes your CSS already works — it just makes it smaller.

For more aggressive optimization — merging adjacent rules, removing unused selectors, shortening colour values, optimizing calc() expressions — use a build-time tool like cssnano or CSSO.

Features

🗜️

Conservative Minification

Protects strings and value expressions; check the result in your target browsers.

📊

Live Size Stats

Original, minified, saved bytes, and percent reduction.

⌨️

Keyboard Shortcut

Ctrl + Enter triggers minify from the input.

🔒

Runs Locally

Your code is processed locally without being uploaded by this tool.

📋

One-Click Copy

Send the minified result straight to clipboard.

🆓

Free to Use

No signup, no file-size limits.

Frequently Asked Questions

Will minifying break my CSS?

The tool uses a conservative lexical pass, preserving strings, escapes, function contents (including calc, min, max, clamp and URLs), and custom-property values. It is not a full CSS parser or validator and does not guarantee identical rendering for every stylesheet. Test the result in your target browsers before using it.

How much can I expect my file to shrink?

Typically 15–35% for hand-written, well-formatted CSS. Heavily commented files shrink more. Already-compact CSS shrinks less. Files that came out of a build tool may shrink very little because they're already partially compressed.

Should I minify if my server already uses gzip or brotli?

Yes, but the wire-savings are smaller than the raw difference suggests. Gzip and brotli already eliminate most repeated whitespace. Minification on top of compression typically saves an additional 5–15% on the wire. It's still worth doing, but the dramatic-looking 30% savings you see in the stats panel is the uncompressed size.

Is my CSS uploaded to a server?

No. All minification happens in your browser via a small local JavaScript function. The minifier does not upload your CSS. Page resources, analytics, and ads may still make network requests.

Can I un-minify the result later?

Yes — paste the minified output into our CSS Beautifier and you'll get clean, indented CSS back. Always keep your original source files in version control as the canonical version; the minified output is for production deployment only.

Does it work with SCSS, SASS, or LESS?

No. The minifier expects valid CSS. Compile your SCSS/SASS/LESS to CSS first using your build tool, then minify the output.