CSS Minifier

What this minifier actually does

This is a lightweight, pattern-based minifier, not a full CSS parser. When you click Minify, your browser runs four regular-expression passes over the text, in this order:

1. Remove every /* ... */ comment.
2. Collapse every run of whitespace (spaces, tabs, newlines) into a single space.
3. Remove spaces around { } : ; , and >.
4. Drop the semicolon directly before each closing }, then trim the ends.

That is the whole process. It is predictable, and because it is so simple you can reason about exactly what will change. The stats line shows input size, output size, and bytes saved.

Worked example

/* Card */
.card > .title,
.card .subtitle {
  color: #ffffff;
  margin: 0px 0px 8px;
  width: calc(100% - 2rem);
}

@media (max-width: 600px) {
  .card { padding: 0 ; }
}

Output:

.card>.title,.card .subtitle{color:#ffffff;margin:0px 0px 8px;width:calc(100% - 2rem)}@media (max-width:600px){.card{padding:0}}

The comment, line breaks, and indentation are gone. The space between .card and .subtitle stays because it is a descendant combinator and removing it would change the selector. The spaces inside calc(100% - 2rem) also stay: + and - are not in the list of trimmed characters, which matters because calc() requires whitespace around them. What a full optimizer would also do, and this one does not: shorten #ffffff to #fff, and 0px to 0.

Known risks, and how to avoid them

1. A space before a pseudo-class is removed

.nav :first-child { color: red; }

becomes .nav:first-child{color:red}. The original matches the first child of any element inside .nav. The minified version matches .nav only when it is itself a first child. Write .nav *:first-child instead: it means the same thing as the original and survives minification.

2. Text inside quotes is changed

.price::before { content: "Total : 10, incl. tax"; }

The passes do not know where a string starts or ends, so the output contains "Total:10,incl. tax". Runs of spaces inside strings are also collapsed. This affects content values and attribute selectors that contain these characters. Check such rules after minifying, or use a parser-based minifier.

3. License comments disappear

/*! Library v2 | MIT License */ is removed like any other comment. Many licenses require the notice to ship with the code, so paste it back at the top of the output.

4. Broken CSS is minified without warning

Input with a missing } is minified as if nothing were wrong. On one long line, a missing brace is much harder to find, and it can cause the browser to ignore every rule after it. Run your source through the CSS Beautifier first if you are not sure it is well formed.

Limitations

• No merging of duplicate selectors or shorthand properties, and empty rules such as .a{} are kept.
• Spaces around the + and ~ combinators are kept, so a few bytes remain.
• No source map is produced.
• Only the output is minified. Your input stays in the left editor so you can adjust it and run again.

For a build pipeline, a parser-based tool such as cssnano, csso, or Lightning CSS understands selectors and strings and applies safe value optimizations. This page is best for a quick one-off shrink of a stylesheet you can check by eye.

When to use a different tool

• To make minified CSS readable again, use the CSS Beautifier.
• To shrink the scripts on the same page, use the JavaScript Minifier.
• To compress the HTML that loads your styles, use the HTML Minifier.

Frequently asked questions

Is this CSS minifier safe to use on production stylesheets?

For most plain stylesheets, yes, but check two cases first. It removes the space before a colon, so a selector like ".nav :first-child" becomes ".nav:first-child", which matches different elements. It also removes spaces around colons, commas, semicolons, braces, and > inside quoted strings. For a build pipeline, use a parser-based minifier such as cssnano, csso, or Lightning CSS.

Does it shorten colors or remove units from zero values?

No. It only removes comments and whitespace and drops the last semicolon in each rule. Values such as #ffffff and 0px are left as written, rules are not merged, and empty rules are kept.

Are license comments like /*! ... */ kept?

No. Every /* ... */ comment is removed, including /*! license banners that many minifiers preserve. If a license requires the notice, add it back at the top of the minified file.

Why does the real download size drop less than the Saved figure?

The Saved figure compares raw byte counts. Most servers send CSS compressed with gzip or Brotli, and compression already shrinks repeated whitespace well, so the difference over the network is smaller than the raw difference.

Can I get my original CSS back from the minified version?

Only the layout. The CSS Beautifier restores indentation and line breaks, but removed comments are gone for good. Keep your original source file and treat the minified file as build output.

Is my CSS sent to a server?

No. Minification runs in your browser. The input editor keeps a copy in your browser local storage so it survives a reload, and Clear removes it.