CSS Minifier: Compress Your Stylesheets

How to use the css minifier

1. Paste your stylesheet into the CSS input field.
2. Toggle the options: remove comments (optionally keeping /*! license */ notes), shorten hex colors, remove units from zero lengths, and drop the last semicolon.
3. The minified output and the exact byte savings appear below.
4. Copy the compressed CSS into your project.

How CSS minification works

A css minifier reduces file size without changing how the styles render. This tool first splits your stylesheet into tokens: strings, comments, url() contents, punctuation and words. Each kind of token is treated by its own rules, which is what keeps the output correct.

1. Comment removal: every /* ... */ block is dropped when the option is on. Comments that start with /*! are kept when the license checkbox is on.
2. Whitespace collapse: runs of whitespace become one space, and spaces next to {, }, ; and , are removed. In declarations the space after the colon goes too. In selectors the space around >, + and ~ is removed, but a descendant space is kept.
3. Semicolon cleanup: the last semicolon before a closing brace is dropped, because CSS treats it as optional.
4. Color shortening: in declaration values only, an exact six-digit hex color whose pairs repeat (such as #aabbcc) becomes three digits (#abc).
5. Zero units: a length such as 0px becomes 0 where that is always valid.

For example, a { color : red ; } becomes a{color:red}. The input is 19 bytes and the output is 12, so 7 bytes (36.8%) are saved on that single rule.

What the minifier preserves

Not all whitespace can be removed safely. A correct css compressor must leave certain constructs untouched, and this one does.

• Strings: quoted text keeps every character. content: "a : b ; c" comes out exactly as written, including the spaces, the colon and the semicolon.
• The descendant combinator: a :hover means any hovered descendant of a, while a:hover means a hovered a. The space is kept, so ul li :first-child is unchanged.
• url() contents: unquoted URLs, including data URIs with semicolons, are copied as they are. Only the whitespace just inside the parentheses is trimmed.
• 8-digit hex colors: #aabbccdd includes an alpha channel and is never shortened. IDs such as #aabbcc { } in selectors are never treated as colors.
• progid filters: legacy filter: progid:... values, including startColorstr='#ff000000', are left alone.
• calc() expressions: spaces around + and - are required, so they stay. Zero units inside calc(), min(), max(), clamp() and var() are not touched either.
• Time units and flex-basis: 0s and 0ms keep their unit, and flex and flex-basis values keep 0px.
• Custom properties: a value such as --gap: 0px keeps its units. Whitespace runs inside the value are collapsed to one space.

This tool does not merge rules, reorder declarations or rename anything. It only removes characters that the parser ignores.

Typical size savings

The table below was measured with this css minifier using all default options. Your results depend on how much whitespace and how many comments the original author left in.

Already compact CSS saves little, as the last row shows. Across 17 real stylesheets, including this site's own CSS and Tailwind's source files, the combined saving was about 21% of the bytes. Hand-written, well-formatted CSS with many comments benefits the most.

When to minify CSS

Minification is a build step, not a development workflow. Keep your source files formatted for readability and run the css minifier only when preparing assets for production.

If you also need to compress markup, the companion HTML minifier applies the same ideas to HTML documents. To estimate what the saved bytes mean for slow connections, a download time calculator converts file size and bandwidth into seconds.

Pair minification with gzip or Brotli on your server. Minification removes characters people add for readability, while transfer compression removes repetition. The two savings overlap, so measure the compressed size before and after instead of adding the percentages together.

Common mistakes to avoid

Naive search-and-replace scripts often break stylesheets. Watch out for these pitfalls when you minify CSS manually or evaluate a tool.

• Stripping the space before a pseudo-class: turning a :hover into a:hover changes which elements match.
• Removing spaces inside calc(): calc(100%-10px) is invalid. The CSS Values specification requires spaces around the minus sign.
• Rewriting strings: content: "hello world" must keep its internal space, and a colon or semicolon inside quotes is just text.
• Shortening the wrong hex values: #aabbcd cannot become #abcd because the digit pairs differ, and an 8-digit #aabbccdd carries alpha, so it is left alone.
• Stripping license comments: some open-source licenses require attribution to remain in distributed files. Keep the /*! option on if your project depends on those notices.

Worked examples