Failing Lighthouse audits
Fix the `unminified-css` opportunity that gates your Performance score from 89 → 95+.
Free CSS Minifier & Compression Test Online
Minify CSS code by removing whitespace, comments, and redundant syntax — all in your browser.
Processed in your browser. Nothing uploaded.
What Is CSS Minification?
CSS Minifier is a free online tool that minify CSS code by removing whitespace, comments, and redundant syntax — all in your browser. No files are uploaded — everything is processed locally on your device.
CSS minification removes every byte that does not change how a browser interprets the stylesheet: whitespace, indentation, comments, longhand declarations that have shorter shorthand equivalents, six-digit hex codes that compress to three, and zero units like `0px`. The result is functionally identical CSS at 16 to 25% smaller before any HTTP compression, based on official benchmarks from clean-css, csso, and cssnano. Stack Brotli on top and you typically save another ~17% over gzip on already-minified CSS. Google Lighthouse runs an `unminified-css` audit that flags any stylesheet with at least 4 KiB of estimated minification savings, and those unminified bytes are render-blocking on first load, which directly hurts First Contentful Paint and Largest Contentful Paint. web.dev's official guidance is direct: "Minifying CSS files can improve your page load performance." This is also why every modern bundler (Vite, Next.js, Astro, esbuild) runs a CSS minifier (cssnano via PostCSS in most defaults) before shipping a build. Use this CSS minifier online as a one-shot test for your stylesheet, a quick CSS minification test before deploying a one-off page, or a privacy-safe alternative to pasting proprietary design-system CSS into a third-party server. Everything runs in your browser. Drop a `.css` file or paste code, see the byte-by-byte savings, and copy the minified output back into your build pipeline. No file is uploaded, no signup, no daily caps.
Privacy guarantee: CSS Minifier processes all files directly in your browser using WebAssembly. No data is uploaded to any server, no information is collected, and the tool works offline after loading. Unlimited usage with no signup, no watermarks, and no file size limits.
How to Use CSS Minifier
Paste your CSS
Paste your CSS code into the input area or upload a .css file from your device.
Minify
Click the Minify button to strip whitespace, comments, and redundant code.
Copy or download
Copy the minified CSS to your clipboard or download it as a file.
Why Use Our CSS Minifier?
Runs entirely in your browser — no CSS uploaded to any server
Reduces file size by removing whitespace, comments, and unnecessary code
Improves page load speed and Core Web Vitals scores
Preserves all CSS functionality and selector specificity
Handles large stylesheets and complex selectors
Shows file size savings after minification
No installation or build tools required
Advanced Guide: CSS Minifier
CSS Minification Gains, Real Measurements
Minifying production CSS typically removes 16–25% of file size before any HTTP compression, and stacks with Brotli for an extra ~17% over gzip. Google Lighthouse flags any stylesheet with ≥ 4 KiB of estimated minification savings via its `unminified-css` audit, and the unminified bytes count toward render-blocking time and slow LCP.
- clean-css on Bootstrap: 16–22% smaller — Whitespace + comment + longhand-to-shorthand, official clean-css benchmarks
- csso (structural): ~20% smaller — Extra savings from selector/declaration merging and rule restructuring
- cssnano (default preset): 15–25% smaller — Default-safe preset; "advanced" preset goes higher with extra risk
- Brotli vs gzip on minified CSS: ~17% smaller — Brotli q11 vs gzip level 9, Cloudflare and Google Brotli benchmarks
- Lighthouse trigger threshold: ≥ 4 KiB savings — `unminified-css` audit fires when estimated savings cross this, counts toward Performance score
| Transform | Example | Typical Savings |
|---|---|---|
| Whitespace + indentation | ` margin: 0;` → `margin:0` | Single biggest win on hand-written CSS |
| Comment removal | `/* nav styles */` → (gone) | Preserves `/*! */` license comments by default |
| Longhand to shorthand | `margin-top/right/bottom/left` → `margin` | Common in Bootstrap, hand-written framework code |
| Hex shortening | `#ffffff` → `#fff`, `#aabbcc` → `#abc` | Free win on color palettes |
| Zero-unit removal | `0px` → `0`, `0.5em` → `.5em` | Tiny per-rule, adds up across large stylesheets |
| Color name → hex | `white` → `#fff`, `black` → `#000` | Shorter encoding for common colors |
| Font-weight numerals | `normal` → `400`, `bold` → `700` | ~3 chars per declaration on weight-heavy designs |
| Duplicate selector merging | csso restructure | Largest gains on framework-merged stylesheets |
| Empty rule removal | `.unused {}` → (gone) | Cleans up dead rules left by build tools |
When Minified CSS Actually Matters
WordPress theme dev
Ship a minified `style.css` so themes pass Theme Check and load faster on average shared hosting.
Static site generators
Astro, 11ty, Hugo, drop the minifier into your build before Brotli compression.
Email signature CSS
Some email clients cap inline-style sizes; minified rules get more design through.
CDN cache savings
Smaller asset = lower egress bill at scale. Stacks with HTTP/2 push and Brotli.
Mobile + slow networks
Render-blocking CSS shrinks LCP on 3G and emerging-market connections.
Frequently Asked Questions
How much smaller will my CSS file be after minification?
Typical reductions range from 20% to 50%, depending on how much whitespace and how many comments your original file contains. Files with extensive developer comments see the largest reductions.
Will minification break my CSS?
No. Minification only removes characters that have no effect on how the browser interprets the stylesheet. All selectors, properties, values, and media queries remain functionally identical.
Should I minify CSS for production websites?
Yes. Minification is a standard best practice for production deployments. Smaller CSS files download faster, improving page load times and user experience. Keep unminified source files for development and debugging.
How much smaller does Bootstrap or my framework CSS get?
Real-world benchmarks: clean-css typically produces 16–22% reductions on Bootstrap, csso achieves around 20% via structural rule merging, and cssnano's default preset hits 15–25%. On hand-written stylesheets with developer comments, savings can reach 35–50%. Brotli compression on top adds roughly another 17% on already-minified CSS versus gzip.
Why does Lighthouse flag my CSS as unminified?
Lighthouse triggers its `unminified-css` audit when it estimates at least 4 KiB of potential savings from removing whitespace, comments, and redundant declarations. Those unminified bytes are render-blocking on first paint, so they push back FCP and LCP. Minify and re-run the audit — the opportunity disappears and the Performance score climbs.
What does CSS minification actually remove?
In order: whitespace and indentation, comments (except `/*! */` license headers by default), longhand-to-shorthand collapse (margin-top/right/bottom/left → margin), hex-color shortening (#ffffff → #fff), zero-unit removal (0px → 0), color-name to hex swap (white → #fff), font-weight numerals (bold → 700), duplicate-selector merging, and empty-rule removal. Selectors and specificity stay byte-identical.
Is this a CSS minification test I can use online?
Yes. Paste in your stylesheet (or upload a .css file) and the tool minifies it instantly, showing the before/after byte count and percentage reduction. It runs entirely in your browser — useful as a quick CSS minification test before you wire a minifier into your build, or as a one-off compressor for a static page that does not have a build step.
Will minified CSS work in older browsers?
Yes. Minification only removes characters that the CSS parser would skip anyway — comments, whitespace, redundant zeros. The output is byte-equivalent in behavior to the input across every browser, including IE11 and legacy WebKit. Selector specificity and cascade order are preserved exactly.
More Developer Tools
JSON Formatter
Format, validate, and minify JSON data in your browser. Supports syntax highlighting.
Base64 Encode / Decode
Encode or decode Base64 strings directly in your browser.
URL Encode / Decode
Encode or decode URL strings and query parameters in your browser.
Regex Tester
Test and debug regular expressions with real-time match highlighting.
Hash Generator
Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from any text — entirely in your browser.
JWT Decoder
Decode and inspect JSON Web Tokens — header, payload, and signature — in your browser.
Timestamp Converter
Convert Unix timestamps to human-readable dates and vice versa — all in your browser.
Diff Checker
Compare two blocks of text and see the differences highlighted side by side.
JavaScript Minifier
Minify JavaScript code by removing whitespace, comments, and shortening syntax.
SQL Formatter
Format and beautify SQL queries with proper indentation and keyword capitalization.
Popular Free Tools
Merge PDF — Free Online
Combine multiple PDF files into one document — entirely in your browser, no uploads.
Compress Image — Free Online
Reduce image file size while preserving quality — no uploads, browser only.
QR Code Generator — Free Online
Generate QR codes for URLs, text, email, and more — entirely in your browser.
MP4 to MP3 — Free Online
Extract audio from video files and save as MP3, entirely in your browser.
Password Generator — Free Online
Generate strong, random passwords with customizable length and character sets.
JSON to CSV — Free Online
Convert JSON to CSV online free. Paste or upload JSON arrays and download CSV files instantly.