Home › Generators & Text Tools › CSS Minifier
CSS Minifier
This CSS minifier shrinks your stylesheet without changing how it looks. Paste your CSS, and it strips out comments, collapses extra whitespace, and drops the spaces and semicolons a browser does not need — then shows you the original size, the minified size, and exactly how much you saved. Copy the result or download it as a .css file, ready to use on your site.
Your CSS never leaves your browser — the minifying happens entirely on your device.
Size before and after
The blue bars compare the file size before and after minifying. The longer the light-blue bar is relative to the dark-blue bar, the more the minifier saved.
How it works
A stylesheet is written for people, but a browser only needs the rules. A typical CSS file is full of things that help humans and mean nothing to a browser: comments explaining a section, blank lines between rules, indentation, and spaces around braces and colons. Minifying removes all of that while keeping every selector, property, and value intact. The browser reads the shorter file, the page looks exactly the same, and the file downloads faster — which matters on slow connections and on pages that load many stylesheets.
The minifier works in one careful pass through your text. First it strips comments, everything between /* and */. Then it walks through the code character by character. Text inside quotes is copied through untouched, because a space inside a string — for example the content of a ::before rule — can change what the visitor sees. Outside of strings, runs of whitespace are collapsed: a space is kept only when two words or values would otherwise run together, such as the space in ".header a" or in "16px 24px". Everywhere else the space goes.
After the pass, three small clean-ups run. Spaces around the symbols {, }, :, ;, ,, >, +, and ~ are removed, so "color : red" becomes "color:red" and ".a , .b" becomes ".a,.b". The semicolon right before a closing brace is dropped, because CSS does not require it: ".header{margin:0;}" and ".header{margin:0}" mean the same thing. Finally, any space left after a colon is removed. Nothing else changes: colours, units, numbers, and selectors come through exactly as you wrote them.
The result is shown with three numbers. The original size and the minified size are measured in bytes, and the saving is shown both as a byte count and as a percentage. A neatly formatted stylesheet with comments and one declaration per line often shrinks by 25 to 40 percent. A file that was already written tightly may only shrink a few percent — that is normal, and it means there was little waste to remove. Use the Copy button to grab the minified code for pasting, or the Download button to save it as a .css file.
One habit makes minifying safe: keep your formatted stylesheet as the master copy. Edit the readable version, run the minifier again, and publish the small file. Never edit the minified file directly — it is a one-line wall of code that is easy to break and hard to read. If you ever need to change a style, change the master and minify again.
Worked example
Take this short stylesheet, which styles a page header. It has a comment, blank lines, indentation, and one declaration per line:
/* Page header styles */
.header {
background-color: #2563eb;
color: #ffffff;
padding: 16px 24px;
margin: 0;
}
.header a {
color: white;
text-decoration: none;
}
Step 1: The comment "/* Page header styles */" is stripped, along with the blank line after the first rule.
Step 2: Line breaks and indentation collapse. The space in ".header a" and in "16px 24px" is kept, because those words must stay apart; every other space goes.
Step 3: Spaces around braces, colons, and semicolons are removed, and the semicolon before each closing brace is dropped.
Step 4: The minified output is .header{background-color:#2563eb;color:#ffffff;padding:16px 24px;margin:0}.header a{color:white;text-decoration:none}.
Paste the sample into the tool and press Minify CSS. The tool gives exactly the same result — 174 bytes down to 117 bytes, a saving of 57 bytes, or 32.8% — and the two rules still style the header in exactly the same way.
FAQ
What does a CSS minifier do?
A CSS minifier shrinks a stylesheet by removing everything the browser does not need to understand it: comments, extra spaces, line breaks, and the last semicolon before a closing brace. The rules, selectors, and values stay exactly the same, so the page looks identical, but the file is smaller and downloads faster. This minifier does all of that in your browser, so your code is never uploaded anywhere.
How much smaller will my CSS get?
It depends on how the stylesheet was written. A neatly formatted stylesheet with comments and one declaration per line often shrinks by 25 to 40 percent. A file that is already compact may only shrink by a few percent. The tool shows the original size, the minified size, and the exact percentage saved, so you can see the result for your own file before you use it.
Will minifying my CSS break anything?
Minifying only removes whitespace and comments, and it never changes selectors, property names, or values, so a correctly written stylesheet keeps working exactly as before. One thing to watch is strings: text inside quotes, such as the content of a ::before rule, is left untouched on purpose, so special spacing inside strings is safe. As always, keep your original formatted file for editing and use the minified copy only on the live site.
What is removed from the CSS?
Four things are removed. First, comments between /* and */ are stripped out. Second, line breaks and runs of spaces are collapsed, keeping a single space only where two words would otherwise join together. Third, spaces around symbols such as braces, colons, commas, and semicolons are removed. Fourth, the semicolon right before a closing brace is dropped, because it is optional in CSS.
Should I edit the minified CSS directly?
No. Minified CSS is meant for browsers, not people: it is hard to read and easy to break by accident. Keep your readable, formatted stylesheet as the master copy, make your edits there, and run the minifier again whenever you publish a change. That way you always have a clean source to work from and a small file to serve.