What CSS minification does
Minifying CSS means rewriting a stylesheet so it uses as few bytes as possible while behaving exactly the same. Browsers do not care about the comments, indentation and line breaks you add to keep the code readable — that whitespace is dead weight shipped over the network on every visit. Trimming it from a 40 KB styles.css can bring it down to roughly 30 KB, and fewer bytes mean the page starts painting sooner.
This tool does that right in your browser: paste your CSS, get the compact one-line version back, and see how many bytes and what percentage you save. Nothing is uploaded anywhere.
What it strips out
The minifier walks the code one character at a time and, everywhere except inside strings, applies four rules:
- Delete
/* … */comments, including multi-line ones. - Collapse any run of spaces, tabs and newlines into a single space.
- Drop the space that sits next to
{,},:,;and,. - Remove the last
;of every block, because the one right before}is optional.
The key phrase is except inside strings. Anything between quotes — say content:"→ " — and anything inside url(…), such as a data URI, is copied verbatim. That way a ; inside url(data:image/svg+xml;utf8,…) or a space inside content:" a , b " is never damaged. It is also why spaces between values, as in padding:10px 20px, survive: they are not glued to any of those symbols.
The rules in action
| Rule | Before | After |
|---|---|---|
| Strip comments | /* note */ a{color:red} | a{color:red} |
| Trim spaces | h1 { margin : 0 ; } | h1{margin:0} |
Drop trailing ; | p{color:red;} | p{color:red} |
| Collapse newlines | a , ↵ b { top: 0 } | a,b{top:0} |
| Keep value spaces | div{padding:8px 16px} | div{padding:8px 16px} |
How the savings are measured
Savings are counted in UTF-8 bytes rather than characters, because bytes are what actually travel across the wire. The percentage formula is:
saved % = (original_bytes − minified_bytes) / original_bytes × 100
In CSS made only of ASCII letters, digits and symbols, every character weighs one byte, so bytes and characters line up; but an accent or an emoji inside a comment can weigh two bytes or more.
Worked example
Start from this block, with one comment and the usual two-space indentation:
/* Boton principal */
.btn {
color: #ffffff;
background: #6d5ae8;
padding: 10px 20px;
}That is 93 bytes. Minifying deletes the comment, glues the declarations together, removes the ; that sat before the closing brace, and keeps only the space in 10px 20px because it separates two values. The result is:
.btn{color:#ffffff;background:#6d5ae8;padding:10px 20px}That is 56 bytes. The saving is 93 − 56 = 37 bytes, or 37 / 93 × 100 = 39.8%. On a real file full of comments and blank lines the figure usually lands somewhere between 15% and 40%.
Frequently asked questions
Does minifying change how my page looks?
No. Minification only removes characters the browser ignores — comments and redundant whitespace — plus the optional ; before each }. The rule tree it produces is identical, so the layout renders exactly the same. If anything changed, that would be a bug in the minifier, not in the idea.
Is minifying the same as Gzip compression?
No, and they stack. Minifying shrinks the source text by dropping what is unnecessary; Gzip or Brotli then compress that text as it is sent over HTTP. Minified CSS also compresses slightly better because it is more regular. The best setup is to minify during your build and let the server apply Brotli on top.
Can I read the CSS again after minifying?
Yes. Any CSS formatter, or your browser’s dev tools, will re-indent it instantly. Even so, always keep your commented version as the source of truth and minify only the copy you serve in production — the same discipline you use with JSON.
Will it break data URIs or quoted content?
No. The minifier recognizes '…' and "…" strings and the inside of url(…), and copies them literally, leaving their spaces and ; untouched. That is why an embedded image such as url(data:image/svg+xml;utf8,…) still works after minifying.
Does my CSS leave my computer?
No. Everything runs in JavaScript inside your own browser: the CSS you paste is never sent to or stored on any server. You can safely minify internal stylesheets without exposing them.