CSS Minifier & Beautifier
Minify CSS to reduce file size or beautify for readability. Instant formatting and compression.
Upload a CSS file (max 5MB)
Beautify Options
How to Use:
- Paste your CSS code in the left textarea or upload a CSS file
- Click "Beautify" to format code for readability or "Minify" to compress it
- Customize beautify options (indent size, spaces vs tabs)
- Copy the output or download it as a file
Benefits:
- Minification: Reduces file size by removing unnecessary characters and whitespace
- Beautification: Makes code more readable with proper indentation and line breaks
- File Size Reduction: See size reduction statistics
- Optimization: Remove comments and extra spaces to improve load times
Exactly What This CSS Minifier Strips (and What It Doesn't)
The minifier runs three regex passes over your stylesheet: it deletes every /* ... */ comment block, collapses all runs of whitespace (spaces, tabs, newlines) down to a single space, then strips the space around { } : ; , entirely and drops the last semicolon before a closing brace. That's it — there's no selector merging, no shorthand collapsing (it won't turn margin: 10px 10px 10px 10px into margin:10px), no color shortening (#ffffff stays six digits, it won't become #fff), and no dead-rule removal. It's a whitespace-and-comment minifier, not a structural optimizer like cssnano.
The beautifier has a side effect worth knowing before you use it: it also deletes comments first, then rebuilds indentation from scratch using your chosen indent size and spaces-vs-tabs setting. So running "Beautify" on a stylesheet permanently discards any /* section header */ comments in it — beautify here is really "reformat," not "restore original formatting."
Reading the Reduction Percentage
The stats panel compares raw character counts of the input and output boxes, not gzip-compressed size. A heavily-commented, deeply-indented stylesheet might show a dramatic 40-60% reduction because most of its bytes were whitespace and comments. A stylesheet that's already tightly written with minimal spacing might only shrink by single digits — that's expected, not a sign the tool is doing less work. Because most production servers already gzip CSS in transit, the real-world byte savings on the wire are usually much smaller than the raw-character number shown here; minification mainly helps when gzip isn't in play (e.g. some CDN edge caches, email-embedded `<style>` blocks) or when you want fewer bytes to gzip in the first place.
Example of what the regex passes do:
Input: .btn {\n color: #ffffff;\n /* primary action */\n padding: 10px 20px;\n}
Output: .btn{color:#ffffff;padding:10px 20px} — note #ffffff is untouched and the value's internal space (10px 20px) survives, since only whitespace immediately around { } : ; , is removed.
When to Use Which Mode
Shipping a hand-written stylesheet
If you're not running a build pipeline (webpack, Vite, a Sass compiler with cssnano) and you hand-author a small site's CSS, running it through Minify before upload trims comments and formatting bytes without needing to install tooling.
Reading someone else's minified CSS
Paste a one-line, unreadable stylesheet pulled from a page's dev tools into Beautify to see the actual rules and selectors on separate lines — useful for figuring out what a third-party theme or plugin's CSS is really doing before you override it.
Standardizing indentation before a diff
If a teammate's CSS mixes tabs and 4-space indents, running it through Beautify with a consistent indent size setting first makes a subsequent git diff show only the real changes instead of whitespace noise.
Checking pre-minified output before shipping
Minify your source, then eyeball the output box for syntax you didn't expect — since this tool does simple text substitution rather than parsing an AST, a stray comment-like string inside a value could theoretically confuse it, so a quick visual check before deploying is worthwhile.
Frequently Asked Questions
Why didn't my hex colors or shorthand properties get shortened?
This minifier only removes comments and collapses whitespace — it doesn't rewrite values. #ffffff won't become #fff and 0px won't become 0. For that level of optimization you'd need a parser-based tool like cssnano in a build pipeline.
I beautified my CSS and my comments are gone — is that a bug?
No, that's expected behavior: the beautifier strips /* ... */ blocks before it reformats, the same as minify does. Keep an unmodified copy of your source if you need to preserve comments.
Does the size-reduction percentage reflect real page-load savings?
It reflects raw character count only, before gzip/Brotli compression. Servers typically compress CSS in transit, so the actual bytes saved over the network are usually smaller than the percentage shown, especially for already-repetitive CSS that compresses well regardless of whitespace.
Can I feed it SCSS, LESS, or CSS with custom properties and nesting?
Native CSS custom properties (--var: value) and standard nesting pass through fine since they're just characters to the regex. Sass/LESS-specific syntax (@mixin, $variables, & nesting shortcuts) isn't CSS yet — compile it first, then minify the output.
What happens with a string value that contains a brace or semicolon, like content: "a;b"?
Because minification works on raw text rather than parsing tokens, characters inside quoted string values are treated the same as any other character and can be affected by the whitespace-trimming rules. It's rare in practice, but worth a visual check in the output box if your CSS has unusual string content in content or font-family declarations.