CSS Minifier

What the CSS minifier does

The tool shrinks a stylesheet by removing everything the browser does not need. It deletes comments, collapses runs of whitespace and line breaks into a single space, and removes spaces around the characters { } ; : , > + ~. The rules themselves are not changed, so the page looks the same while the file is smaller.

Example

Input:

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

Output: .btn{color:#fff;padding:8px 16px;}. The comment and all line breaks are gone, and the spaces around the braces, colons and semicolons are removed. The final semicolon is kept, which is harmless in a browser.

Why minify CSS

• Faster loads. Smaller files download quicker, particularly on mobile connections. CSS is render-blocking, so size matters for first paint.
• Lower bandwidth costs on high-traffic sites.
• Cleaner delivery. Developer comments, licence notes you do not want public and old documentation are removed from what visitors download.

Minification typically saves a modest share of the raw size, often 10–30% depending on how much whitespace and commenting the original had. Gzip or Brotli compression on your server then shrinks it further, and the two work well together.

Cases where this simple minifier needs care

• Spaces inside calc(). CSS requires spaces around + and - inside calc(). Because this tool removes spaces around +, an expression like calc(100% + 10px) becomes calc(100%+10px), which browsers reject. Use a different minifier for stylesheets that use calc() with addition, or restore the spaces afterwards.
• Descendant selectors followed by a pseudo-class. div :first-child (any first child inside a div) and div:first-child (a div that is itself a first child) mean different things, and removing the space around the colon merges them.
• Strings and URLs. Whitespace inside quoted strings and url() values can be altered.

Always test the minified file in a browser before deploying it. Keep your original, readable stylesheet as the source and treat the minified copy as a build output.

Better for large projects

For anything beyond small sites, add a minification step to your build process (for example through a bundler) so every deploy is optimised automatically. This tool is handy for quick one-off jobs such as email styles, snippets and small standalone pages.

See also: the HTML formatter and the colour contrast checker for checking text legibility.