Remove comments and unnecessary whitespace from CSS to reduce its file size.
How to Use the CSS Minifier
Paste your CSS into the box.
Click "Minify".
Review the size reduction and click "Copy to Clipboard".
What the Minifier Changes
The tool applies five text rules, in this order:
Every block comment, from /* to the next */, is deleted.
Any run of spaces, tabs and line breaks becomes a single space.
Spaces on either side of opening and closing braces, semicolons and commas are removed.
Spaces after a colon are removed. Spaces before a colon are kept on purpose, because in a selector such as .menu :first-child that space changes which elements match.
The semicolon after the last declaration in each rule is dropped, since CSS does not require it.
The size line compares the length of your trimmed input with the output and shows the percentage saved. Sizes are counted in characters, which equals bytes for plain English CSS but not for characters such as ₹ or emoji in content values.
.btn-primary{color:#ffffff;background-color:#0d6efd;padding:8px 16px}.nav > li a:hover,.nav > li a:focus{text-decoration:underline}
The size goes from 177 to 131 characters, a saving of 26.0%. Notice what stays: the space inside 8px 16px is needed to separate the two values, and the spaces around the child combinator between .nav and li are left as they are.
What It Does Not Do
This is a whitespace-and-comment minifier. Build tools such as cssnano, Lightning CSS or esbuild go further, and their extra steps are not performed here:
Shortening colours, for example #ffffff to #fff.
Dropping units from zero values or the leading zero from decimals, such as 0px to 0 or 0.5 to .5.
Merging duplicate selectors, combining longhand properties into shorthand, or removing rules that are overridden later.
Removing spaces around the child, adjacent and sibling combinators.
Cases to Check Before Deploying
Strings are not protected. A content value containing two spaces in a row, or text that looks like a comment, will be altered. Check any rules that use content, quotes or font names with unusual spacing.
License comments are removed too. If a library's licence asks you to keep its notice, often written as a comment beginning with /*!, add it back to the top of the minified file.
Keep your original, readable file for editing. Minified CSS is meant for serving, not for maintaining.
Minification and server compression work together. Most web servers and CDNs also compress files with gzip or Brotli before sending them, and minifying first still trims the final transfer a little further.
Frequently Asked Questions
It strips comments, collapses all whitespace and line breaks, and removes unnecessary spaces around punctuation like braces, colons, and semicolons — all without changing what the CSS actually does.
For normal stylesheets, no. Comments and layout whitespace have no effect on how styles apply. The exception is text inside quotes: because strings are not protected, repeated spaces or comment-like text within a content value or font name will be changed, so review rules that rely on quoted text.
It depends entirely on how much of your file is comments, indentation and line breaks. The short example on this page shrinks by 26%. CSS that is already compact, or was produced by a build tool, may barely change. The Saved figure shown after minifying tells you the exact result for your file.
The layout can be restored with a CSS beautifier or the format command in a code editor, which puts each declaration back on its own line. The deleted comments cannot be recovered, so always keep your original source file.
Yes. Rules such as @media, @import and @font-face are handled with the same whitespace rules, so @media (max-width: 600px) becomes @media (max-width:600px) and the nested rules are joined onto one line. The space between @media and its condition is kept.