CSS Minifier & Unminifier
Minify or unminify CSS, SCSS, LESS, Sass, Stylus & more. Compress code for production or paste minified CSS to make it readable again. Auto-detects language, verifies code integrity. Free, real-time, 100% browser-based.
0 chars
0 B
One Tool for All CSS Languages
Unlike most minifiers that only handle plain CSS, this tool auto-detects and supports 8 stylesheet languages: CSS, SCSS, Sass, LESS, Stylus, PostCSS, CSS Modules, and Utility-First CSS. It recognizes your $variables, @mixins, nesting, @import chains, and every language-specific syntax — preserving them perfectly during minification or formatting.
Why Minify & Unminify CSS?
Minifying removes unnecessary whitespace, comments, and line breaks — making your files smaller and faster to download. Think of it like removing extra spaces from a sentence: “The cat sat” becomes “The cat sat” — same meaning, less space.
Unminifying (also called beautifying) does the reverse: it takes compressed CSS that looks like one long line and restores proper indentation, line breaks, and spacing so you can actually read and edit it. Perfect when you need to debug production code or understand someone else's minified stylesheet.
Our tool goes beyond basics. It optimizes color values (#aabbcc → #abc), shortens zero units (0px → 0), removes empty rules, and can merge duplicate selectors — all while verifying your code structure stays identical.
How to Use — 3 Simple Steps
Paste or Upload Your Code
Paste CSS, SCSS, LESS, Sass, or Stylus code into the input panel. Or click Upload to load a file. You can also drag & drop. The tool auto-detects your language and shows which features it found.
Choose Minify or Unminify
Minify compresses your code for production (smaller file size). Unminify / Beautify does the opposite — paste any compressed or minified CSS and it restores proper indentation, line breaks, and spacing to make it human-readable again. Toggle advanced options to fine-tune optimizations.
Copy, Download, or Verify
Output updates instantly as you type. Copy to clipboard or download as a file. Check the green “Verified” badge confirming your code structure is preserved, and the “What Changed” panel showing every optimization.
Optimization Reference
| Optimization | Before | After | What it means |
|---|---|---|---|
| Whitespace removal | margin: 10px ; | margin:10px | Extra spaces removed |
| Block comments | /* note */ h1{} | h1{} | Developer notes stripped |
| Line comments | // note | h1{} | SCSS/LESS notes stripped |
| Color shortening | #ffaa00 | #fa0 | Same color, fewer chars |
| Zero optimization | margin: 0px 0rem | margin:0 0 | Zero needs no unit |
| Trailing semicolons | {color:red;} | {color:red} | Last one is optional |
| Empty rule removal | .unused { } | (removed) | Does nothing, safe to drop |
Minify for Production
Always serve minified CSS in production. Combined with gzip, you can reduce delivery size by 70–90%.
Unminify to Verify
After minifying, switch to “Unminify / Beautify” to see the clean structure. This proves nothing was lost — just made smaller.
Watch the Integrity Badge
The green “Verified” badge confirms your code structure is preserved. If it turns orange, review the “What Changed” panel.
SCSS/LESS Single-Line Comments
This tool handles both /* block */ and // line comments. Select the right language or use Auto-Detect for best results.