⭐ Click the star in your address bar to bookmark this page ×
Home Developer & Code Tools CSS Minifier

CSS Minifier — Compress Stylesheets in Your Browser

Paste your CSS and get a minified version with all comments, whitespace, and trailing semicolons stripped. Free, no signup, runs entirely in your browser.

✓ Free Forever✓ No Signup✓ Runs Locally✓ Size Stats
Input CSS 0 chars
Minified CSS
0 chars

What This Tool Does

The CSS Minifier compresses your CSS by stripping out every byte that isn't strictly required for the browser to render the page. Comments, line breaks, indentation, optional semicolons, and extra spaces around braces and colons all go. What's left is the same stylesheet, just much smaller — typically 15–35% smaller for readable CSS, sometimes more.

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:#fff;padding:20px 0;border-bottom:1px solid #e5e7eb}.header h1{font-size:24px;color:#111827}

Same selectors, same properties, same values, same cascade. The browser does the same thing. About 60% smaller.

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

1

Paste your CSS

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

2

Click Minify CSS

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

3

Check the stats

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

4

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: CSS comments (/* ... */), leading/trailing whitespace on every line, line breaks, tabs, indentation, redundant spaces around {, }, :, ;, ,, >, +, and ~, plus the optional trailing semicolon before each closing brace.

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

🗜️

Safe Minification

Only strips whitespace and comments — no risky transforms.

📊

Live Size Stats

Original, minified, saved bytes, and percent reduction.

⌨️

Keyboard Shortcut

Ctrl + Enter triggers minify from the input.

🔒

Runs Locally

Nothing leaves your browser.

📋

One-Click Copy

Send the minified result straight to clipboard.

🆓

Free Forever

No signup, no file-size limits.

Frequently Asked Questions

Will minifying break my CSS?
No — assuming your CSS was valid to start with. The minifier only removes whitespace and comments, both of which browsers ignore. Selectors, values, and the cascade are untouched. Your page will render identically.
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. There are no network requests when you click Minify. Open DevTools → Network to verify.
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.