CSS Minifier

The CSS Minifier strips comments and unnecessary whitespace from a stylesheet so it downloads faster. It works on plain text with a few safe rules, which makes the result predictable: selectors, properties and values stay as you wrote them, only the gaps between them disappear.

A measured example

This 114-character input:

/* Buttons */
.btn {
  color: #ffffff;
  padding: 10px 20px;
}

.btn:hover,
.btn:focus {
  background: #7c5cff;
}

becomes this 78-character line, about 32% smaller:

.btn{color:#ffffff;padding:10px 20px}.btn:hover,.btn:focus{background:#7c5cff}

The rules it applies

1. Every /* … */ comment is removed, including /*! … */ license banners.
2. Spaces and line breaks around {, }, :, ;, , and > are dropped.
3. The last semicolon before a closing brace is removed, since CSS doesn't need it.
4. Any remaining run of whitespace becomes a single space, which keeps 10px 20px and calc(100% - 20px) intact.

What it does not do: shorten #ffffff to #fff, remove units from 0px, merge duplicate selectors, or delete unused rules. Tools such as cssnano or clean-css in a build pipeline do those deeper optimisations.

Edge cases to check after minifying

• Text inside quotes. The whitespace rules also apply inside strings, so content: "Hello, world" becomes content:"Hello,world". If you generate visible text with content, check it.
• A space before a colon in a selector. a :hover (any hovered element inside a link) is not the same as a:hover, but the minifier joins them. This pattern is rare and usually a typo anyway.
• License notices. Some open-source licences ask you to keep the copyright comment. Paste it back at the top of the minified file if needed.

Is minification still worth it with gzip?

Yes, the two work together. Gzip and Brotli compress repeated patterns during transfer, while minification removes bytes before compression, and the browser also parses a smaller file. For a small site on shared hosting without a build step, pasting the stylesheet here and uploading the result is a simple way to shave off weight. Keep the original, commented version as your source file and treat the minified copy as output only; if you ever need to read it again, the CSS Beautifier restores the line breaks, though not the comments. The same approach works for markup with the HTML Minifier.

Putting the minified file live

Save the output as a separate file, for example style.min.css, and point your page's <link rel="stylesheet"> tag at it. Browsers and CDNs cache stylesheets aggressively, so add a version to the URL, such as style.min.css?v=2, whenever you upload a new copy; otherwise returning visitors may keep the old styles for days. Then reload a few key pages and check the layout on a phone before moving on.