About the CSS Minifier
What is a CSS minifier?
A CSS minifier compresses a stylesheet by removing everything the browser doesn't need: comments, indentation, line breaks, the spaces around braces and colons, and the final semicolon in each rule. The selectors, properties, and values that remain are untouched, so the compressed file styles your page exactly like the original — it's just smaller and faster to download.
The dangerous part of minifying CSS is the whitespace that does matter. The spaces inside calc(100% - 20px) are syntax; removing them breaks the expression. The same goes for @media (min-width: 600px) and (max-width: 900px), descendant selectors like .nav .item, and anything inside quoted strings or url() values. This minifier parses structure instead of blindly deleting spaces, so all of those come through intact — and the brace-balance badge warns you if the input itself is truncated. Everything runs in your browser with no CDN and no upload.
How to Use This Tool
- Add your CSS. Paste it into the left editor, click Open file, or hit Sample to try it.
- Watch it compress. The output updates live, and the chips show the before and after sizes with the percentage saved.
- Check the badge. "Braces balanced" means the structure is sound; a warning usually means a truncated paste.
- Take the result. Copy it or download
style.min.css, ready to deploy.
Common Use Cases
- Production builds without tooling: Minify hand-written CSS for small sites that don't run a bundler.
- Email and embed styles: Compress CSS destined for inline <style> blocks where size limits apply.
- Quick size checks: See how much a stylesheet would actually save before adding a build step for it.
- CMS and theme fields: Fit custom CSS into character-limited theme options and plugin settings.
Going the other way? The CSS Formatter expands minified CSS with the same engine, the CSS Validator checks your syntax, and the CSS Compare tool diffs two stylesheets. Or browse all our free developer tools.
Frequently Asked Questions
Will minifying break my styles?
No. The minifier only removes comments and insignificant whitespace. Required spaces — inside calc() expressions, between media query keywords, and in descendant selectors — are preserved because the tool parses CSS structure rather than stripping characters blindly.
Are strings and data URIs safe?
Yes. Quoted strings keep their exact contents, including spaces and braces, and semicolons inside url(data:...) values are never treated as declaration separators.
How much smaller will my CSS get?
Typical hand-written CSS shrinks 15–35% depending on how heavily it's commented and indented. The size chips show the exact numbers for your input, and gzip on your server compounds the savings.
Does it rewrite my values or merge rules?
No. This is a safe whitespace-and-comments minifier: it never renames colors, collapses shorthands, or merges selectors, so the output is predictable and diff-friendly. What you wrote is what ships, minus the bytes that don't matter.
Can it minify SCSS or LESS?
Mostly, yes. Both are brace-based supersets of CSS, so whitespace removal is generally safe — but line-based preprocessor comments (//) are not understood, so minify the compiled CSS output for production use.
Is my code uploaded anywhere?
No. Minification runs entirely in your browser with self-contained JavaScript — no CDN, no server round trips, no logging. It even works offline once the page has loaded.