CSS Minifier

What this tool does

A CSS minifier rewrites a stylesheet so it contains the fewest characters possible while producing exactly the same result in the browser. It strips every /* comment */, collapses runs of spaces, tabs and newlines, and removes the whitespace around structural punctuation like {, }, :, ; and ,. It also deletes the redundant semicolon that often sits just before a closing brace. The output is a single dense line of CSS that is byte-for-byte equivalent in meaning to what you pasted in. Everything happens inside your browser — your CSS is never uploaded.

Why you might need it

Every byte of CSS your visitors download costs time, and CSS blocks rendering: the browser will not paint the page until it has the stylesheet. Hand-written CSS is full of things that exist purely for humans — indentation, blank lines between rules, explanatory comments. None of that affects the page, so shipping it to production is wasted bandwidth. Minifying is the quick win: it removes the slack without changing a single style. It is also handy when you need to inline CSS into an HTML <style> block, paste a snippet into a CMS field, or fit a stylesheet into a tight space such as an email template.

How to use it

1. Paste your CSS into the input box, or drop a .css file directly onto it.
2. Click Minify CSS, or press Ctrl/Cmd + Enter.
3. Read the summary: it shows the original size, the minified size, and the percentage saved.
4. Click the copy button to grab the minified output, ready to paste into a build asset or a <style> tag.

Common pitfalls

The biggest worry with any minifier is corruption — a tool that strips a space it should have kept. This minifier specifically guards against that by tracking string state: anything inside "...", '...' or a url(...) value is copied out exactly as written, so a font family like "Helvetica Neue" or a content string with deliberate spaces survives intact. One genuine limitation to know: this tool does not rewrite values (it will not shorten #ffffff to #fff, merge duplicate selectors, or drop unused rules). It is a safe, predictable whitespace-and-comment minifier, not an optimising compiler. If you need structural optimisation, run a full build tool as well. Also note that important comments (the /*! ... */ style some licences require) are removed too — keep an unminified copy if you must retain a licence header.

Tips and advanced use

Minify as the last step before deploying, and keep your readable, commented source in version control — never edit the minified file by hand. Pair minification with gzip or Brotli compression on your server; they are complementary, and a minified file compresses to fewer bytes than an unminified one. Watching the saved percentage is a useful habit: if minifying a file you thought was already optimised still saves 30%, your build pipeline probably is not minifying CSS at all. Because the whole process runs locally, it is perfectly safe to minify stylesheets from a private or unreleased project — nothing about your code leaves your machine.