Free online tool
CSS Minifier
Paste CSS to strip comments and whitespace. Everything runs locally — nothing is uploaded.
Minified CSS will appear here…
What CSS minification actually does
Minifying CSS removes bytes a browser doesn't need to render your page: comments, indentation, line breaks, and redundant semicolons. The resulting file is functionally identical but often 20–40% smaller, which shortens download time, reduces parse cost on mobile devices, and improves the Largest Contentful Paint metric that Google uses as a ranking signal. On a typical marketing site, minifying a 50 KB stylesheet down to 32 KB shaves real milliseconds off first paint on slower networks.
When to run this tool
Modern bundlers (Vite, Webpack, esbuild) already minify CSS in production builds. This tool is useful when you're pasting CSS into a CMS field, a Shopify theme, an email template, or a landing page builder that doesn't have its own optimizer. It is also handy for auditing a stylesheet: minifying makes it much easier to see how large your CSS really is once whitespace stops padding the count.
What it does not do
This tool does not remove unused selectors, deduplicate rules, autoprefix vendor prefixes, or reorder declarations. For those tasks you want a full tool like PurgeCSS or PostCSS. Think of this minifier as the last-mile step you run on already-clean stylesheets, not a substitute for good CSS hygiene.
+Is it safe with SCSS or LESS?
It works on plain CSS. Compile SCSS/LESS to CSS first, then minify — a preprocessor's syntax will trip up the whitespace rules.
+Will it break media queries?
No. Whitespace inside @media queries is collapsed but braces and query text stay intact.
+Does it change my selectors?
No. Selector names, class names and IDs are preserved character-for-character.
Shrinking a stylesheet without changing what it renders
Minifying CSS strips comments, collapses whitespace, and shortens redundant syntax while preserving the exact cascade and specificity of the original rules — the browser should paint an identical page before and after.
For any production site, minified CSS is standard practice, but understanding exactly what a minifier is and isn't allowed to change helps you spot the rare case where an aggressive optimization actually alters rendering, rather than assuming every byte saved is automatically safe. Treat the process as a build artifact, not something you hand-tune, since regenerating it from source is always safer than patching the compressed output directly.
What actually gets removed
Comments disappear entirely, since browsers never read them anyway. Whitespace between selectors, properties, and values collapses to the minimum needed to keep tokens separated. Trailing semicolons before a closing brace get dropped, and some minifiers shorten color values, turning #ffffff into #fff or converting rgb(0,0,0) into #000 when the result is byte-for-byte equivalent in rendering.
Minification and compression solve different problems
Minification reduces the number of meaningful bytes before transfer; gzip or brotli compression, applied by the server afterward, finds repeated patterns and encodes them more efficiently. The two stack — minifying first, then compressing, gets you a smaller result than either alone — but minifying doesn't make compression unnecessary, since compression handles repetition (like the same selector pattern appearing hundreds of times) far better than whitespace removal ever could.
The gotcha with source maps and debugging
Once minified, a stylesheet becomes effectively unreadable in browser devtools, which makes debugging layout issues in production painful if you ship the minified file without a companion source map. Keep the unminified version in version control and generate the minified copy as a build step, rather than hand-editing the compressed output, since re-adding readable formatting to minified CSS after the fact is far more error-prone than just keeping both.
Selector merging and why it's riskier than it looks
Aggressive minifiers sometimes merge rules that share identical property blocks under a combined selector list, or reorder declarations to group similar ones together for smaller output. This is usually safe, but if two merged selectors have different specificity in a context where cascade order actually decides which rule wins on a shared property, merging them incorrectly can change which style applies — a rare but real class of minifier bug worth knowing about if a page looks subtly different after a build change. Custom properties, also known as CSS variables, add another wrinkle, since a minifier that renames or shortens a --custom-property token without updating every var() reference to it elsewhere in the file will silently break the cascade rather than throwing any kind of error.
People also search for
- css minifier online
- minify css file
- compress css code
- remove css comments whitespace
- css optimization tool
- shrink stylesheet size
- css minify vs compress
- reduce css file size