CSS Minifier

CSS Minifier

Paste or type CSS into the box, Open a file up to 5 MB, or drag one onto the page, then click Minify Code.

The result is shown with syntax colours, along with the size before and after and the sizes after gzip and Brotli compression, which is what visitors actually download. Notes list what changed and point out any problems in the CSS. Copy the result, or Download it. The download is named after the file you opened.

Minifying runs in your browser. Nothing you paste or open is uploaded.

What changes

Each change is made only where it can’t alter how the CSS works.

Shortening only where it’s safe

0px becomes 0 only in properties that never take a plain number. In margin or padding, 0 and 0px mean the same thing. But a unit can matter:

• Inside calc(), the unit is required. calc(0px + 10%) is valid, but calc(0 + 10%) breaks the whole declaration, because you can’t add a plain number to a percentage. So nothing inside calc() is shortened.
• Properties that accept plain numbers keep the unit, because there a plain 0 can be read as a different kind of value. That includes custom properties like --gap: 0px, which might later be used inside calc().

0.5 becomes .5, and #aabbcc becomes #abc. Both are exact equivalents. A colour is shortened only when each pair of digits repeats; #a1b2c3 stays as it is.

Spaces that have to stay

Most spaces in CSS are only there for readability, but some carry meaning. The minifier keeps these:

• Around + and - in calc(). calc(100% - 10px) works, but calc(100%-10px) doesn’t.
• Between selectors. .menu :hover, with a space, matches any hovered element inside .menu. .menu:hover matches .menu itself.
• In nested CSS. Inside a rule, & .title (a .title inside the element) and &.title (the element when it also has the class title) are different things.
• Before the bracket in media queries. @media screen and (min-width: 600px) works, but and(min-width:600px) is read as a function name, and the whole query stops working.

Modern CSS passes through untouched

Some older minifiers mangle CSS written in newer syntax. This one passes all of it through unchanged:

• nesting
• @layer, @container and @scope
• range media queries like @media (width >= 600px)
• @property definitions

The same goes for old Internet Explorer hacks, such as *zoom: 1 or the 9 suffix, which some sites still carry for very old browsers.

Empty rules and layers

Rules with nothing inside are removed. Empty @layer blocks are the one exception that needs care. The order of cascade layers is set by the first time each layer appears, so an empty block like @layer base {} can be there on purpose, to fix the order. The minifier turns it into the shorter statement @layer base;, which keeps the order intact.

Comments

Comments are removed, except licence comments starting with /*!. Bootstrap’s copyright notice is an example: most open-source licences require it to stay with the code.

Source map comments like /*# sourceMappingURL=style.css.map */ are removed too, with a note. The map was made for the original file, so it no longer matches the minified one.

One rule per line

By default the result is one long line. Switch on the option to put one rule per line instead. The file is still almost as small, but when it’s stored in Git or compared with a previous version, each changed rule shows up as its own line instead of one giant changed line.

When the CSS is broken

A single missing brace can make browsers skip large parts of a stylesheet without any error message. The notes point out the usual problems:

• Unclosed or stray braces.
• Unterminated quotes.
• A misplaced @charset. It only works as the very first thing in the file.
• @import rules. Each one makes the browser download another stylesheet before the page can be styled, which slows loading.
• Text that’s neither a rule nor a declaration, such as a fragment of HTML or a typo.

How much will it save?

Here’s Bootstrap 5.3.8, comparing its readable stylesheet with the minified version it ships:

Minifying cut the file by 17%, but the download only by about 7%. Compression already handles repeated spaces and long comments well. That’s why the tool shows the compressed sizes too: they’re the honest measure of what visitors save.

If your server doesn’t compress CSS at all, fixing that saves far more than minifying. Check with the GZIP Compression Test.

FAQ

Will minifying change how my site looks?

No. Every change is an exact equivalent, and spaces and units that carry meaning are kept. If the notes point out broken CSS, fix that in your original file first, because it affects the original just as much as the minified version.

Can I get the readable version back?

The CSS Formatter restores indentation and line breaks, but removed comments don’t come back. Keep your original file and minify a copy.

What about the CSS inside my HTML pages?

The HTML Minifier minifies <style> blocks and style attributes along with the page. For JavaScript files, use the JS Minifier.

Is my CSS uploaded anywhere?

No. Everything happens in your browser, and nothing you paste or open is stored.