Skip to main content
ToolsBay

CSS Minifier

Strip comments and whitespace to shrink a stylesheet.

Runs entirely in your browser — nothing is uploaded

Your CSS

1 line

Minified

1 line

Frequently asked questions

Will minifying break my stylesheet?

It should not. Quoted strings and url() contents are copied through untouched, and spaces that carry meaning — the descendant combinator, values in a shorthand, operators inside calc() — are preserved. Naive minifiers get all three of those wrong.

Why is my saving smaller than other tools report?

Because correctness comes first. A tool that strips the space in "calc(100% - 2rem)" or "a :hover" will report a bigger saving and produce a stylesheet that renders differently. Gzip closes most of that gap anyway.

Are comments removed?

Yes, except a leading /*! comment, which is the convention for a licence header that must survive minification.

Should I minify if my server already uses gzip or Brotli?

The additional benefit is real but modest — compression already handles repeated whitespace well. Minification helps most on the uncompressed size, which matters for inline critical CSS.

What minification actually removes

CSS minification strips what the browser does not need: comments, indentation, line breaks, the final semicolon in a block, and empty rules. Applied to typical hand-written CSS that removes 25–40% of the bytes before compression.

Where naive minifiers break stylesheets

The common shortcut is a regular expression that deletes whitespace around {, }, :, ; and ,. It fails in four places that appear in real code:

  • Inside strings — content: "hello, world" loses the space after the comma, changing what the page renders.
  • In calc() — calc(100% - 2rem) becomes calc(100%-2rem), which is invalid and drops the declaration.
  • In selectors — a :hover becomes a:hover, a completely different selector.
  • In at-rules — @media (min-width: 600px) becomes @media(min-width:600px), which is not valid.

This minifier tokenises the stylesheet instead, so those cases survive. Beautify reverses the process when you need to read minified CSS.

For the markup around your styles, see the HTML beautifier, and for scripts the JavaScript formatter.

Related tools

All developer tools