CSS Minifier
Minify CSS in your browser: comments removed, whitespace collapsed, last semicolons dropped, strings and url() values left exactly as written.
/*! Theme v1 */ .card{color:#1e56ec;padding:1rem 2rem}
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Paste a stylesheet and get it back minified: comments gone, whitespace collapsed, the final semicolon in each block dropped. Strings and url() values are left exactly as written.
How to use
- Paste the CSS. It stays in the browser tab, which matters when the stylesheet is not public yet.
- Keep
/*!comments on. That is the convention for a licence header, and stripping one can breach the licence of the code you are minifying. - Turn on one rule per line if the file goes into version control. It is a few bytes larger and vastly easier to diff.
- Copy the result, or download it as a
.min.css. - Minify the build output, not the source. Keep the readable file as the one you edit.
Example
/*! Theme v1 */
.card {
color: #1e56ec;
padding: 1rem 2rem;
}becomes
/*! Theme v1 */ .card{color:#1e56ec;padding:1rem 2rem}The space inside 1rem 2rem stays, because it separates two values. The space around { does not, because nothing depends on it.
Pitfalls
- A minifier built on regular expressions breaks the first time a
;or a}appears inside acontentstring. This one scans character by character for that reason. - A space before a colon is meaningful in a selector:
.a :hoverand.a:hoverare different rules. Whitespace before a colon is preserved here. - Unquoted
url()values can contain spaces and brackets. They are copied through untouched. - Minified CSS still compresses. Gzip or Brotli does most of the work, so the gain over a well written file is smaller than it looks.
- Minifying by hand and keeping only the minified file makes the stylesheet unmaintainable. Keep the source.
- A stylesheet with a syntax error does not get fixed by minifying. Unterminated strings and comments are reported here rather than silently mangled.
/*! */comments are kept by convention, not by the CSS specification. Anything that strips comments generically will still remove them.- Concatenating minified files without a newline between them is safe in CSS, but a missing final
}in one file swallows the next.
Compatibility
The output is ordinary CSS and works anywhere the input did. Nothing is rewritten: colours, units and shorthand are left as you wrote them, so a value your target browser understands stays understood. The tool runs entirely in your browser and handles stylesheets up to 100,000 characters.