CSS Minifier

About CSS minifier

The CSS minifier compresses a stylesheet by deleting comments, line breaks and the spaces that CSS does not need, such as those around braces, semicolons, commas and combinators. It keeps the spaces that carry meaning, so a descendant selector and a calc() sum survive intact. Use it for a quick production copy of a stylesheet or snippet when no bundler is involved.

How to use it

1. Paste your stylesheet into the Original CSS box; the byte count updates as you type.
2. Click Minify CSS. This tool has no option toggles, so every clean-up pass runs each time.
3. Check the summary card, which lists Original Size, Minified Size, Saved and the percentage Reduction.
4. Copy the compact stylesheet from the Minified CSS box.

A descendant selector and a calc() width

/* nav */
.nav a :hover , .nav > li {
  width: calc( 100% - 2 * 8px );
  color : #fff ;
}

.nav a :hover,.nav>li{width:calc(100% - 2 * 8px);color:#fff}

When to use it

• Producing a compact copy of a theme file before pasting it into a site builder's custom CSS field.
• Shrinking the critical CSS you inline in the head of a landing page.
• Removing developer comments and licence banners from a stylesheet before sharing it with a client.
• Checking how much of a stylesheet's weight is formatting rather than rules.

Questions about CSS minifier

Does it shorten colors or merge duplicate rules?

No. It only removes whitespace and comments. Values such as #ffffff stay as written, and identical rules are not combined, so a bundler-grade optimizer will save more on a large file.

Will a comment that starts with an exclamation mark survive?

No. Every block comment is deleted, including the kind some teams use to keep a licence notice. Add the notice back by hand if your license requires it to be present.

Can removing spaces change what my selectors match?

No. A space before a pseudo-class, as in a :hover, is a descendant combinator and is kept, while a:hover stays tight. Spaces are dropped only next to braces, semicolons, commas and the > + ~ combinators.

What happens to spaces inside calc(), strings and url()?

Inside calc() and other functions the spaces around plus and minus are kept because CSS requires them. Quoted strings and url() contents are copied exactly as written.

Why is the last semicolon in each rule missing?

CSS does not require a semicolon after the final declaration in a block, so it is removed to save a byte per rule. Browsers read the shortened rule identically.

Related tools

• HTML minifierMinify your HTML by removing all the unnecessary characters.
• JS minifierMinify your JS by removing all the unnecessary characters.
• Text diffCompare two texts side-by-side with line and character-level highlights.
• CSS unit converterConvert between px, rem, em, pt, percent, vw and vh with a full cross-unit comparison table.
• JSON validator & beautifierValidate JSON content and make it looks good.
• SQL formatter/beautifierFormat & beautify your SQL code with ease.