CSS Minifier
A small example shrinks from 98 to 66 bytes (32.7% smaller) by removing comments and whitespace only: .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
How to use
- Paste your CSS into the input box.
- Leave "Keep /*! comments" on if your file has a license header that must stay. Turn it off to remove every comment.
- Read the size before and after, then copy the minified CSS.
How it works
This tool only removes things that cannot change how the CSS is read: comments, line breaks, indentation, and spaces around { } ; , > and after a colon. The last semicolon before a closing brace is dropped.
It does not shorten colors, numbers or units, merge rules, reorder anything or rename anything. For example 0px and #ffffff stay as they are. That is a deliberate limit: it keeps the output predictable and safe, at the cost of a somewhat smaller saving than a full optimizer.
A space is kept wherever it has meaning: the descendant combinator in a :hover, spaces between values such as margin: 0 auto, the space in "and (min-width: 600px)", and the spaces inside calc() around + and -. Quoted strings, unquoted url() values such as data URIs, and escape sequences are copied exactly.
The tool warns about an unterminated comment, string or url(), and about unbalanced braces. It still produces output, so check the original when you see a warning.
FAQ
Will minifying change how my page looks?
It should not. Only whitespace and comments are removed, and a space is kept anywhere it matters. If you ever see a difference, keep the original and check the input for a missing brace or quote, which the tool reports as a warning.
Why is the saving smaller than with other minifiers?
Full optimizers also merge rules, shorten values and drop unused code. Those steps can change results in edge cases, so this tool does none of them. Whitespace and comments are usually most of the savings in hand-written CSS.
What happens to /*! comments?
By default comments that start with /*! are kept, because that is the usual way to mark a license notice. Turn the option off to remove them too.
Can I use the output in production?
Yes for normal CSS, including nested rules and custom properties. As with any tool, test the result on your page before you ship it, and keep your readable source file.
Is my CSS uploaded?
No. Everything runs in your browser.