CSS minifier — shrink stylesheets safely in your browser

How to use the CSS minifier

1. Paste your stylesheet into the CSS box (a sample is there to try).
2. Leave **Keep /! licence / comments ticked if your CSS includes a licence notice.
3. The Minified CSS appears as you type, with Saved, Original and Minified sizes in bytes.
4. Copy the result, or download it as styles.min.css.

What it does and when to use it

Minifying removes the characters a browser does not need: comments, line breaks, indentation, the space after a colon and the last semicolon in each block. The CSS works the same but downloads a little faster. It is handy for a small site without a build step, an HTML email, a CSS snippet you paste into a CMS, or a quick check of how much a stylesheet could shrink.

Going the other way, the CSS formatter turns minified CSS back into readable, indented code. For scripts, the JavaScript minifier does the same job, and the SQL formatter tidies database queries.

How it works

The minifier reads your CSS one character at a time and tracks where it is: inside a string, inside url(…), inside brackets, in a selector or in a declaration. With that context it decides which whitespace is safe to drop:

• Whitespace next to { } ; , : and brackets is removed.
• A colon is treated as a declaration colon only when it is followed by a value, so a :hover in a selector keeps its space.
• Strings and url() contents are copied exactly as written, so url("a b.png") stays intact.
• Comments are removed, except /*! … */ when you keep them.
• The final semicolon before } is dropped.

Worked examples

These are the tool’s own outputs.

A simple rule.

a {
  color: red;
  /* note */
  margin: 0 auto;
}

becomes a{color:red;margin:0 auto}. The comment, the line breaks and the last semicolon are gone; the space in 0 auto stays because it separates two values.

Spaces that matter. @media screen and (min-width: 600px) { .a > .b :hover { width: calc(100% - 2px); } } becomes @media screen and (min-width:600px){.a>.b :hover{width:calc(100% - 2px)}}. The tool reports Saved: 13.1%, from 84 bytes to 73.

Limits and tips

• Serve with compression too. Gzip or Brotli on your server usually saves much more than minifying alone; the two work well together.
• Keep the original. Edit the readable file and minify a copy. Minified CSS is hard to change by hand.
• Broken CSS stays broken. The tool does not validate your stylesheet; a missing brace in the input will still be missing in the output.
• No source maps are produced. Browser developer tools will show the minified lines.