CSS Minifier
Minify CSS by removing comments and extra whitespace. Paste your stylesheet, see how many bytes you save, and copy the compressed CSS. Strings, calc() and url() values are left untouched.
How to use the CSS Minifier
- Paste your CSS into the top box, or click "Load example".
- The minified CSS appears below as you type, along with the original size, the new size and the percentage saved.
- Choose which options to apply, then click "Copy result" and paste the CSS into your production stylesheet.
Before and after
This CSS:
/* Button styles */
.btn {
color: #ffffff;
margin: 0.5em 0;
padding: 10px 20px;
}
.btn:hover {
opacity: 0.8;
}becomes:
.btn{color:#ffffff;margin:.5em 0;padding:10px 20px}.btn:hover{opacity:.8}In this small example, 99 bytes become 73 bytes, a saving of about 26%. Larger stylesheets with more comments and indentation often save more.
What this minifier does
- Removes comments (and optionally keeps license comments that start with
/*!) - Removes line breaks, indentation and spaces around
{,},;,,and after: - Removes the last semicolon before a closing brace
- Shortens leading zeros, such as
0.5to.5 - Leaves text in quotes,
url()values, and the spaces insidecalc()unchanged, so nothing breaks
This is safe minification. It does not rename selectors, merge rules or rewrite values, so the CSS behaves exactly as before. Build tools such as cssnano can compress further, but they also change more of your code.
Why minify CSS?
Smaller files download faster, use less bandwidth and let the page start rendering sooner, which helps visitors on slow connections. The saving depends on how your CSS is written: heavily commented, well-indented files shrink the most. Servers that compress files with gzip or Brotli reduce the difference, but minifying first still gives a smaller result.
Tips for using minified CSS
- Keep your original, readable stylesheet as the source file and only upload the minified copy.
- Minify for production only. Minified CSS is hard to read and edit.
- Test your pages after replacing the stylesheet, especially if your CSS contains unusual syntax.
- Rename the file clearly, for example
style.min.css, so it is not confused with the original.
Frequently asked questions
Why minify CSS?
Minified CSS is smaller, so it loads faster and uses less bandwidth. Faster pages give visitors a better experience and are part of Google's page experience signals.
Is minified CSS safe? Will it break my styles?
This tool only removes comments and unnecessary whitespace and keeps strings, url() values and calc() spacing intact, so your styles should work the same. It is still wise to test your site after replacing the file.
Can I get the original CSS back?
Not exactly. Comments and original formatting are removed for good, so always keep your readable source file. A CSS formatter can re-indent minified code, but it cannot restore comments.
Does minifying CSS help SEO?
Indirectly. Smaller files can improve page speed and Core Web Vitals, and speed is one of many signals Google uses. Minifying alone will not change your rankings, but it supports a faster site.
Why are my spaces inside quotes still there?
That is intentional. Text inside quotes, such as the content of a pseudo-element, can depend on spaces, so the minifier never changes it.
Is my CSS uploaded or stored?
No. The tool is free and everything runs in your browser. Your code is never uploaded to a server or stored.