CSS Minifier

What is CSS minification?

CSS minification makes a stylesheet smaller without changing how it renders. This free CSS minifier parses your CSS with PostCSS and minifies it with cssnano: it removes whitespace, comments, and the last semicolon in each rule, shortens colours and numbers, and merges duplicate rules, while strings, calc() expressions, selectors, and nesting keep their meaning. It runs entirely in your browser.

Why minify CSS

Minifying CSS strips the whitespace, line breaks, comments, and the final semicolon from each rule to produce a smaller stylesheet. Because CSS blocks page rendering until it loads, a smaller file means the browser can paint the page sooner — a direct improvement to perceived performance and Core Web Vitals.

The styling is unchanged: every rule still applies to the same elements with the same values, only written in fewer bytes.

What this minifier changes

Beyond whitespace and comments, cssnano rewrites values into shorter equivalents: #333333 becomes #333, 0.20s becomes .2s, 0px becomes 0, margin: 0 auto 0 auto becomes margin:0 auto, and font-weight: bold becomes 700. Rules with identical declarations are merged (.a{color:red}.b{color:red} becomes .a,.b{color:red}), exact duplicate rules are removed, and empty rules are dropped.

Every change is checked against all browsers with any recorded usage, so the minified CSS works everywhere the original did: vendor prefixes and fallback declarations are kept, and rules aren't merged when some browsers don't understand one of their selectors.

What stays exactly as written

Text inside strings (such as content values, quoted font names, and attribute selector values), calc() expressions, the space in descendant selectors such as .a :first-child, CSS nesting, and comments that start with /*! (licence comments) are kept. A minifier that only deletes spaces with find-and-replace can break all of these — for example turning calc(100% + 10px) into the invalid calc(100%+10px).

Syntax errors

If the CSS can't be parsed — an unclosed block, string, or comment, or a stray } — the minifier reports the line and column and what's wrong, and Go to error moves the cursor there, instead of producing broken output.

Minify at build time

Keep your source stylesheet formatted and readable, and minify as part of your build or deployment. Serving the minified file to users while editing the formatted one gives you both smaller downloads and maintainable code.

Minification and gzip together

Minification and server compression are complementary. Minifying strips comments and whitespace, then gzip or Brotli compresses the result further, so shipping minified CSS through a compressing server yields the smallest possible download. Doing both is standard for production.

How to minify CSS

1. 1Paste your CSS. Paste the stylesheet or rules you want to compress into the input panel, or load the sample.
2. 2Check the result. The CSS is minified as you type. The output panel shows the minified CSS and how many bytes it saves; if the CSS can't be parsed, the line and column of the error are shown with a Go to error button.
3. 3Copy the result. Use Copy output, then serve the minified CSS in production and keep the formatted copy for editing.

Examples

.btn {
  color: #fff; /* white */
  padding: 8px;
}

.btn{color:#fff;padding:8px}

.card {
  color: #333333;
  margin: 0px auto 0px auto;
  transition: opacity 0.20s ease;
}

.card{color:#333;margin:0 auto;transition:opacity .2s ease}

.a { color: red }
.b { color: red }

.a,.b{color:red}

.note::before {
  content: "a , b";
  width: calc(100% + 10px);
}

.note:before{content:"a , b";width:calc(100% + 10px)}

/*! MIT License */
.a { color: red }

/*! MIT License */.a{color:red}

.a {
  color: red

Line 1, column 1: Unclosed block.

What CSS minification changes

What this minifier removes or shortens, and what it keeps.

Frequently asked questions