CSS minifier

How to minify CSS

Paste your stylesheet into the input pane and click Convert. Comments are removed, runs of whitespace collapse to one space, spaces around braces, semicolons, commas and the > and ~ combinators are trimmed, and the last semicolon in each rule is dropped. The output is one line you can copy or download as a .css file.

Why minify CSS

Smaller stylesheets download and parse faster. That helps page speed, most of all on mobile connections.

A careful minifier

This tool only removes whitespace and comments. It doesn't merge rules, shorten colors or rewrite selectors, so it's very unlikely to break your styles. Spaces around + are kept, because calc(100% + 10px) needs them, and a space before a colon is kept, because a :hover selects something different from a:hover. Comments starting with /*! are removed too, so add license headers back if you need them.

Minify, then compress

Minifying and server compression work together. Gzip or Brotli shrink repeated patterns very well, so comments and indentation cost less over the wire than their raw size suggests. Minifying still helps, since every removed byte is one the browser doesn't have to parse. For a production site, a build tool such as Lightning CSS or cssnano also merges rules and shortens values.

Before you start

Input: CSS. Output: Minified CSS. The settings appear before anything runs, so you can check them first. Your original file is never changed.

The value you enter is processed in your browser. Still test the output where it will be used. Clean formatting does not prove the data is safe or correct.

Keep the original until you have opened and checked the result. The work happens in this browser tab, so the size you can handle depends on your device's memory, your browser and the file itself.

How to use the CSS minifier

1. Paste your CSS into the input pane.
2. Click Convert to minify it.
3. Copy the output or download it as a .css file.