CSS Minifier

What the Minify button does

The minifier reads your CSS one piece at a time, a bit like a browser does. It knows where quoted text, comments, url() values, brackets and selectors start and end. Then it makes these changes:

1. It removes comments. Comments that start with /*! stay, because that is how license notes are marked.
2. It turns each run of spaces, tabs and line breaks into one space.
3. It removes that space where it has no meaning. For example, next to { } ; ,, after the colon in color: red, and around > + ~ between selectors.
4. It removes the last semicolon before each }.

Here is a real example. This input is 237 characters long:

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn:hover,
.btn:focus {
  background-color: #f0f0f0;
}

@media (max-width: 600px) {
  .btn {
    width: 100%;
  }
}

The tool returns one line of 175 characters. The line under the buttons shows 26.2% smaller.

.btn{display:inline-block;padding:0.5rem 1rem;border:1px solid #ccc;border-radius:4px}.btn:hover,.btn:focus{background-color:#f0f0f0}@media (max-width:600px){.btn{width:100%}}

Spaces that separate values stay, as in 1px solid #ccc. The space after @media stays too.

Spaces and text it keeps on purpose

Some spaces change what CSS means. Removing them would break your page, so the tool keeps them. Text inside quotes is copied exactly. We ran each input below through the tool:

Spaces that do not change the meaning still go. For example, ul > li + li becomes ul>li+li, and color: red !important becomes color:red!important.

We tested these cases, plus this site's own stylesheet, with a separate CSS parser. The parser read the same rules and values before and after minifying.

What it does not do

A full CSS minifier in a build tool does more than remove spaces and comments. This tool does not:

• Shorten values. margin: 0px; padding: 0.50em; color: #ffffff; comes out as margin:0px;padding:0.50em;color:#ffffff. Nothing becomes 0, .5em or #fff.
• Merge or remove rules. Duplicate selectors, empty rules and properties that are later overridden all stay.
• Remove unused CSS. It does not know which selectors your pages use.
• Check for errors. A missing brace or a typo goes in and comes out with no warning.
• Squeeze out every last byte. When a space might matter, the tool keeps it. So font: 12px / 1.5 serif and calc(2 * 10px) keep their spaces, even though a browser would accept them without.

Vendor prefixes such as -webkit- are not added or removed. They are copied like any other text.

The Beautify button

Beautify does the opposite job. It turns a minified file back into something you can read:

• One declaration on each line, with a space after the colon.
• Two spaces of indent for each level of nesting. Rules inside @media, @supports and nested CSS are indented one more level.
• Each selector in a list goes on its own line.
• It never breaks a line inside quotes, url() or brackets. A data URL or a ; inside quotes stays in one piece.

Beautify on the minified example above gives this:

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn:hover,
.btn:focus {
  background-color: #f0f0f0;
}

@media (max-width: 600px) {
  .btn {
    width: 100%;
  }
}

Comments in your input stay when you beautify. But comments that Minify already removed cannot come back.

How much does minifying really save?

The line under the buttons counts characters, not bytes. For CSS written in plain English letters, the two numbers are the same. Letters such as é or emoji inside content take more than one byte.

Most web servers also compress CSS with gzip or Brotli before they send it. Compression already shrinks repeated spaces well. So the saving on the network is smaller than the percentage suggests. As a test, we ran this site's own stylesheet through the tool at the time of writing. It went from 31,839 to 25,309 characters, which is 20.5% smaller. After gzip, the file went from 6,931 to 5,652 bytes. That is about 1.3 KB less to download.

When to use this tool

This tool fits small, one-off jobs. For example, a snippet for an HTML email, a <style> block inside a page, or a quick look at how much whitespace a file has. Beautify is handy when you need to read a minified file from a live site.

For a production website, use the CSS minifier in your build tool or bundler. Those tools also shorten values and merge rules, so the file gets a bit smaller. They run every time you build, so you never forget a step. Keep your readable file as the source, and treat the minified file as output you can create again at any time.