How to Minify CSS (and How Much It Really Saves)

To minify CSS, you remove everything the browser doesn't need: comments, line breaks, indentation, the last semicolon in each rule, and longer ways of writing the same value (#FFFFFF becomes #fff, 0px becomes 0). The fastest way is to paste your stylesheet into our free CSS minifier, click Submit, copy the result into a file such as style.min.css and point your page at it. Keep the readable original, because that is the file you edit.

The minifier is free and needs no account. Visitors get 5 tool uses a day, and a free My Botsy account (100% free, no spam) removes that daily cap. Every number in this guide comes from real runs on October 31, 2026: our live tool on mybotsy.com, the same minifier library run on our server for the bigger files, and gzip (level 9) and Brotli (quality 11) for compressed sizes.

How to minify CSS, step by step

1. Open the CSS minifier. It works in any browser, on desktop or phone.
2. Paste your CSS. Paste the whole stylesheet, including @media, @supports and @keyframes blocks. Before you do, check the pitfalls further down, because two common typing habits break the output.
3. Click Submit. The tool shows the original length and the minified length, with the change as a percentage. Both are counted in characters, not bytes, so a stylesheet with accented text or emoji in content: strings weighs a little more on disk than the count says.
4. Copy the result into a new file. Name it style.min.css (or whatever your theme expects) and keep style.css as your working copy. Never edit the minified file by hand.
5. Update the link tag. Change <link rel="stylesheet" href="style.css"> to point at style.min.css. If your files are cached for a long time, add a version (style.min.css?v=2) so returning visitors get the new file.
6. Test the page. Reload with the cache bypassed (Ctrl+Shift+R or Cmd+Shift+R) and check the layouts that use calc(), custom properties and media queries. If you use a CDN, purge the old file there too.

If you change your CSS often, put minification in your build instead (Vite, webpack and most frameworks already include a CSS minifier). The online minifier is the right tool for a one-off file, a WordPress child theme, an email template or a quick size check.

What the minifier actually changes: a real example

We pasted this 306-character snippet into the live tool:

/* Card component */
.card {
    margin: 0px 0px 0px 0px;
    padding: 16px 24px 16px 24px;
    color: #FFFFFF;
    background-color: #ff0000;
    font-weight: bold;
    border: none;
}

.card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.card .title { font-size: 1.50em; line-height: 1.0; }

The tool returned 182 characters, shown as 182 (-40.52%):

.card{margin:0;padding:16px 24px;color:#fff;background-color:red;font-weight:700;border:0}.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.15)}.card .title{font-size:1.5em;line-height:1}

Whitespace is only part of the saving. Here is everything it rewrote, and why each change is safe:

In other tests it also turned ::before into :before, input[type = "text"] into input[type=text] and div > p + ul into div>p+ul. Just as important is what it left alone. calc(100% - 20px) kept the spaces around the minus sign, which CSS requires, and quoted strings stayed exactly as written, including content:" a /* not a comment */ ", the "Open Sans" font name and grid-template-areas: "head head" "side main".

How much does minifying CSS really save?

A 40% drop on a hand-written snippet sounds great, but browsers almost never download raw CSS. Servers compress it with gzip or Brotli first, and compression already squeezes out repeated spaces. So we measured two well-known files before and after minifying, raw and compressed:

The two results are far apart for a simple reason. normalize.css is mostly explanatory comments, and comments are text that compression still has to send, so stripping them saves a lot even after gzip. Bootstrap's source is generated, tidy code with few comments, so after Brotli the saving is about 2 KB. For comparison, Bootstrap's own bootstrap.min.css is 232,803 bytes raw and 22,709 with Brotli, within a few hundred bytes of our output.

The practical rule: minify and compress. Minifying gives you the most on commented, hand-written stylesheets. Compression gives you the most on large files. Neither replaces the other.

Check that your server compresses CSS

Run your stylesheet's URL through our HTTP headers lookup and look for content-encoding. When we checked this site's own custom.min.css, the response showed content-encoding: br (Brotli) and content-length: 3420 for a file that is 14,602 bytes once decompressed, 76.6% less on the wire. If you see no content-encoding row, turn on gzip or Brotli at your host or CDN before you worry about the last few bytes of minification.

One more thing to check if you use Cloudflare: its Auto Minify setting was removed on August 5, 2024, and Cloudflare now recommends minifying at the origin. If you relied on that switch, your CSS may have been served unminified since then.

Before you minify: six mistakes that break or bloat CSS

We fed broken and unusual CSS into the minifier on purpose. These are the real results.

1. A missing closing brace swallows the next rule

Input: .broken{color:red; followed on the next line by .next{color:blue}. Output: .broken{color:red;color:blue}. There was no error, and the .next selector simply disappeared. Count your braces, or run the file through a CSS validator, before minifying anything you didn't write yourself.

2. Decimal zeros with a unit (our minifier, as of October 31, 2026)

Our tool currently turns 0.0px into px, 0.00em into em and a bare 0.0 into nothing, which makes that declaration invalid. 0, 0px, 0.5px and 10.0px are handled correctly. Until we ship the fix, write zero as 0, which is shorter anyway. Neither normalize.css nor Bootstrap contains these values, so both files above minified cleanly.

3. A space inside !important

color: red ! important is valid CSS, but our minifier turned it into color:red importantnt, which browsers drop. Write !important with no space (Bootstrap's 1,715 uses all do).

4. License comments are removed

Even comments that start with /*!, the usual convention for "keep this", were stripped. If a library's license asks you to keep its notice (MIT does), paste the notice back at the top of the minified file.

5. Edge cases that change meaning

An empty custom property such as --empty: ; was removed entirely, and the old Internet Explorer hack *zoom:1 came out as zoom:1, which every modern browser would now apply. If your stylesheet uses either, keep those lines out of the minified file.

6. Expecting a minifier to remove unused CSS

Minification keeps every selector. Two identical .a{color:#abc} rules stayed as two rules, and only an empty .unused{} rule was dropped. Removing CSS your pages never use is a separate job (often called purging), and it saves far more than minifying on big frameworks.

Minify the rest of the page too

CSS is rarely the heaviest file on a page. The same workflow works with our free JavaScript minifier and HTML minifier, and images usually matter most: our guide on how to compress images for a website shows how to cut them down with the free image optimizer. If you are cleaning up config files at the same time, see how to fix invalid JSON errors.

Frequently asked questions

Is minifying CSS safe?

Yes, for valid CSS. A good minifier only removes characters and swaps values for exact equivalents, so the page renders the same. The risk comes from invalid input, such as a missing brace, and from a few edge cases like ! important with a space. Always keep the original file and test the page after switching.

Does minifying CSS help SEO?

Indirectly. Google reads your HTML and content, not your CSS formatting, so minifying is not a ranking signal by itself. Smaller CSS loads and parses faster, and CSS blocks rendering, so it can help loading metrics such as Largest Contentful Paint. On a compressed, already tidy stylesheet the gain is small.

What is the difference between minifying and gzip?

Minifying rewrites the file itself by removing comments, spaces and redundant characters. Gzip and Brotli are compression that the server applies when sending the file, and the browser decompresses it. They stack: normalize.css went from 1,398 bytes with Brotli alone to 544 bytes minified plus Brotli.

Can I unminify CSS?

You can reformat it with indentation using a CSS formatter or the pretty-print button in Chrome DevTools, but comments and original formatting are gone for good. That is why you keep the source file.

Should I minify a file that is already .min.css?

There is little to gain. Bootstrap's official minified file was within a few hundred bytes of ours, so a second pass mostly risks introducing a problem. Minify your own readable CSS, not a vendor's .min file.

Is the CSS minifier free?

Yes. The CSS minifier is free with no account needed. Visitors get 5 tool uses a day, and a free account (no spam) removes the limit.

Ready? Paste your stylesheet into the free CSS minifier, check the size, and then confirm compression with the HTTP headers lookup.