How to Minify CSS Without Breaking It

To minify CSS here, open the CSS minifier, paste your stylesheet into the box, leave the mode on Minify, and copy the result. The output updates as you type, there is no Run button, and nothing you paste leaves your browser. The rest of this guide covers what to check before you ship the output.

Step 1: paste the stylesheet

The tool opens with a real example in the box, a block of this site's own stylesheet with its comments still in it, so you can see a result before pasting anything. Replace it with your own CSS. If you would rather start from an empty box every time, choose Start fresh from the More menu and the example will not load on its own again.

Paste the whole file if you like. Above two million characters the tool shows a warning that it may be slower, but it still runs.

Step 2: decide what to keep

By default Minify removes three things: every comment, whitespace that carries no meaning, and the semicolon right before each closing brace. Two options under Options change that.

Keep comments leaves every comment in place. Use it when a comment has to ship, such as a license header at the top of a theme or a third-party file. The tool does not treat /*! comments specially, so if you need one kept, turn this on.

Keep the last semicolon leaves the final ; in each block. The browser does not need it. Keep it if someone will append declarations to the minified file by hand later and you do not want the next line to run into the last one.

Step 3: read the result before you copy it

Under the output the tool shows the original size, the result size and the percentage smaller, then a short list headed "What was removed" with the number of comments, whitespace characters and last semicolons it took out. If the list says nothing could be removed, the CSS was already minified.

The sizes are the raw bytes of your text, not the size after your server compresses it. A large percentage on a heavily commented file is real, but the difference over the network will be smaller once gzip or brotli is involved.

Two things in the output are worth a glance:

• Inside calc(), min(), max() and clamp() you will still see a space on each side of + and -. That is required by CSS, not something the tool missed.
• Quoted strings and url() values are exactly as you wrote them, spaces included.

If a note says the braces look unbalanced, the tool still produced its best attempt, but your input has a { or } missing. Fix the source rather than shipping the output.

Copy or download

Copy puts the result on your clipboard. Download saves it as minified.css. Keep your original file as the one you edit, and minify again whenever it changes: a minified file is for shipping, not for working in.

For the reasoning behind what is and is not removed, see why minify CSS, and why a regex breaks it. If you lost the original and only have the minified copy, beautify it to get a readable version back.