CSS Minifier and Beautifier

How to use the CSS minifier

1. Paste a stylesheet, a single rule or the contents of a <style> block into the input box.
2. Press Minify (or Ctrl+Enter) to get the smallest output, or Beautify to turn compressed CSS into one declaration per line.
3. Decide whether comments that start with /*! should survive minification. That is the usual convention for license and copyright notices.
4. Compare the size tiles, then copy the result or download it as a file.

Everything runs in your browser with a small tokenizer written for this page, so your stylesheets are not uploaded anywhere.

Worked example

Input:

/* Buttons */
.btn  >  .icon , .btn:hover {
  color : #333 !important ;
  width: calc( 100% - 2 * 8px );
  background: url( "img/a b.png" );
}
@media (min-width: 600px) {
  .btn + .btn { margin : 0 auto ; }
}

Minified result:

.btn>.icon,.btn:hover{color:#333!important;width:calc(100% - 2 * 8px);background:url("img/a b.png")}@media (min-width:600px){.btn+.btn{margin:0 auto}}

Notice what stays: the spaces around - and * inside calc(), the space in margin:0 auto, the space inside the quoted file name and the space between @media and the parenthesis. Beautify reverses the process and prints every selector, declaration and closing brace on its own line.

What makes CSS minification safe

The tool does not use regular expressions on the raw text. It first splits the stylesheet into tokens: strings, comments, unquoted url() values, punctuation and words. Whitespace is then removed only where the CSS grammar guarantees it has no meaning: around braces, semicolons, commas and the colon after a property name, around the >, + and ~ combinators in selectors, and before !important. Everywhere else a run of whitespace becomes one space.

That distinction matters. calc(100% - 8px) is valid, but calc(100%-8px) is not, because the minus sign would be read as part of a number. Likewise .nav :hover (any hovered descendant) and .nav:hover (the hovered nav itself) are different selectors, so the space before a pseudo-class colon is kept. The last semicolon in each block is dropped, nested @media, @supports and @container blocks are handled, and custom properties such as --gap: 8px are treated like any other declaration.

Common mistakes

• Unclosed braces or strings – the tool stops and reports the problem instead of producing broken output. A missing } often hides at the end of a media query.
• Minifying the only copy – keep the readable source in version control and minify as a build step or a copy.
• Expecting optimisation – this tool does not merge rules, shorten colours or remove unused selectors. Those changes can alter the cascade, so they are best left to a build tool that knows your markup.
• Losing license notices – write them as /*! ... */ and keep the option ticked.

For scripts, use the JavaScript minifier. To check colour values from your stylesheet, try the color converter.