How to Minify CSS and What It Actually Removes
By Tools Star Hub Editorial Team · Published
Quick answer: paste your stylesheet into the CSS Minifier and press Minify. It removes every /* comment */, collapses whitespace, and drops spaces around braces, semicolons, colons, commas and the > and ~ combinators. Quoted strings and url() values are copied exactly, and spaces around + and - are kept so calc() keeps working. You get the minified CSS with before and after character counts and the percentage saved.
Stylesheets block page rendering until they arrive, so their size matters more than many other files. Formatting, comments and section dividers make CSS pleasant to maintain but add weight. Minifying strips that out for the published copy while you keep the readable source.
What is CSS minification?
CSS minification rewrites a stylesheet into the shortest text that still means the same thing to the browser. The selectors, properties and values stay the same. What disappears is the human layer: indentation, line breaks, spaces after colons and comments explaining the code.
Some minifiers go further and rewrite values, such as shortening colours or merging rules. This tool deliberately does not. It only removes characters that are safe to remove, which makes the output easy to trust and easy to compare with the source.
Which characters does the CSS Minifier remove?
The minifier walks through the stylesheet character by character and decides whether each gap of whitespace is needed. The rules are short.
| Input | Output |
|---|---|
| /* any comment */ | Removed |
| Spaces next to { } ; : , > ~ | Removed |
| Spaces around + and - | Kept as a single space |
| Space between two words, such as margin: 0 auto | Kept as a single space |
| Strings in quotes | Copied unchanged |
| Contents of url( ... ) | Copied unchanged |
Nothing else is rewritten. The final semicolon in a rule, colour formats, units and the order of rules all stay as you wrote them.
Will minifying break calc() or media queries?
No, and that is by design. In calc(), the + and - operators must have spaces on both sides, so calc(1rem + 2px) is valid but calc(1rem+2px) is not. The minifier always keeps a space around plus and minus signs for that reason.
Media queries keep the spaces they need between words, so @media screen and (min-width: 768px) becomes @media screen and (min-width:768px). The space after a closing bracket before a word is kept too, which protects queries that chain several conditions with and.
Is there any selector I should double-check?
Yes, one. Spaces before a colon are removed, which is right for properties but matters in a selector such as div :first-child, where the space means any first child inside a div. After minifying it becomes div:first-child, which means a div that is itself a first child.
If you rely on that pattern, write it explicitly as div *:first-child. The star keeps the meaning and survives minification. Ordinary selectors such as a:hover, .nav > li and h1, h2 are not affected.
What happens to licence comments?
All comments are removed, including ones that start with /*! which some build tools treat as important licence notices. If a library you ship requires its licence header to stay, paste the header back at the top of the minified file, or keep it in a separate notice file as the licence allows.
How much can CSS minification save?
Well-commented, nicely indented stylesheets often lose a large share of their characters, while CSS that is already compact changes very little. The tool reports the before and after character counts and the reduction, so you see the actual figure for your file.
Servers that send CSS with gzip or Brotli compression already shrink repeated whitespace, so the transfer saving is smaller than the character saving. Minifying still reduces the file browsers must parse and cache, and it removes notes you would rather not publish.
Where does minifying fit in a CSS workflow?
Edit the readable stylesheet, test it, and minify only the version you deploy. If your project already uses a bundler or framework that minifies CSS automatically, you do not need this step for those files.
The tool is handy for everything outside that pipeline: a theme stylesheet for a CMS, CSS pasted into a page builder, a snippet in an email template, or a quick check of how large a third-party stylesheet really is once the comments are gone.
After minifying, load the page with the new file and look at the parts that use media queries, calc() and complex selectors. If anything looks different, compare the relevant rule in the source and output side by side.
What are the limits and privacy details?
You can minify up to 400,000 characters in one run. The minifier does not check that the CSS is valid, so a missing brace in the source will still be missing in the output. Processing happens in your browser, and the stylesheet is not uploaded.
Is minifying CSS the same as gzip compression?
No. Minifying edits the text of the stylesheet itself, while gzip and Brotli are applied by the server when the file is sent and undone by the browser when it arrives. The two work well together. Minifying removes characters that never needed to exist, and compression then packs what is left.
Because compression already handles repeated spaces well, comments are often the bigger win from minifying. Long explanatory comments, change logs at the top of a file and commented-out rules are all sent to every visitor unless they are removed.
What does a stylesheet look like before and after?
A typical rule written for readability spreads one selector and three declarations over five lines, with indentation, a space after every colon and a comment above it. After minifying, the same rule is a single line: the selector, an opening brace, the declarations separated by semicolons and a closing brace.
Multiple selectors joined with commas lose the spaces after each comma, and child combinators such as .menu > li become .menu>li. Values with several parts, like 1px solid #ddd or 0 auto, keep one space between each part, because the browser needs those spaces to tell the parts apart.
The order of every rule is the same as in the source. That matters, because in CSS a later rule can override an earlier one with the same specificity, and changing the order could change how the page looks.
Can I turn minified CSS back into readable code?
Not exactly. Comments are gone for good, and line breaks have to be guessed. Code editors and browser developer tools can reformat minified CSS with indentation again, which is good enough to read it, but your original notes and grouping will not come back. That is why the readable source should always be the file you edit.
How to minify CSS online
- Paste the stylesheet. Paste CSS into the source box, or press Example to load a sample with a comment, a url() value and a media query.
- Press Minify. The compact CSS appears in the output box along with the character counts and reduction.
- Check sensitive spots. Look at calc() expressions, url() paths and any selector with a space before a colon.
- Copy the result. Copy the output into your production file. Keep the readable version for future edits.
Example
A small rule with a comment
/* layout */ .hero { color: #2563eb; margin: 0 auto; } becomes .hero{color:#2563eb;margin:0 auto;}. The comment is gone and the space inside 0 auto is kept.
A calc() value in a media query
@media screen and (min-width: 768px) { .hero { padding: calc(1rem + 2px); } } becomes @media screen and (min-width:768px){.hero{padding:calc(1rem + 2px);}}. The spaces around + survive, so the value still works.
A background image path with spaces
background: url(“/images/hero image.png”) keeps the quoted path exactly, because strings and url() contents are never changed.
Tips and limitations
No value rewriting
Colours, units and shorthand properties are left as written. Shorten them yourself if you want extra savings.
No rule merging
Duplicate selectors are not combined, so the cascade behaves exactly as before.
Licence headers
Re-add any licence comment you are required to keep.
Pair with HTML
Inline style blocks inside HTML are not minified by the HTML Minifier, so run them here first.
FAQ
- Does the CSS Minifier remove all comments?
- Yes. Every /* ... */ comment is removed, including /*! licence comments.
- Is calc() safe after minifying?
- Yes. Spaces around + and - are always kept, which calc() needs.
- Does it change colours or shorten values?
- No. Values are kept as written. Only comments and unnecessary whitespace are removed.
- Are url() paths changed?
- No. Everything inside url( ... ) and inside quoted strings is copied exactly.
- Why did div :first-child change meaning?
- Spaces before a colon are removed. Write div *:first-child to keep the descendant meaning.
- Does it remove the last semicolon in a rule?
- No. Semicolons are kept, so the output stays easy to compare with the source.
- Does it combine duplicate rules?
- No. Rules stay in the same order, so the cascade is unchanged.
- How large a stylesheet can I paste?
- Up to 400,000 characters at once.
- Does it validate my CSS?
- No. Errors in the source, such as a missing brace, will remain in the output.
- Is my CSS sent to a server?
- No. Minification runs in your browser tab.
- Should I minify CSS before or after Autoprefixer?
- Run Autoprefixer on readable CSS first, then minify the prefixed output for production.
- Can minification break CSS custom properties?
- Values inside var() stay intact; problems usually come from earlier hand edits, not whitespace removal.
- How do source maps relate to minified CSS?
- Build tools can emit CSS maps; this paste minifier focuses on compressed text without maps.
- Is it safe to minify print-only stylesheets?
- Yes—same rules apply; keep media queries intact so print styles still target correctly.
- Will @import URLs be inlined?
- No—imports remain references; bundlers handle inlining separately.
- Can I minify Tailwind’s generated CSS?
- Yes after the utility build; do not hand-minify Tailwind source configs.
- Why keep a non-minified copy in git?
- Readable CSS is easier to review; ship minified artifacts from CI instead of editing them.
- Do comments with /*! license */ survive?
- Some pipelines preserve bang comments; assume this quick minify may strip them unless noted.
- How much smaller will gzip make it afterward?
- Minify first, then gzip/brotli on the server—both layers stack for transfer size.
- Can nested CSS from modern browsers be minified?
- If your syntax is valid nested CSS, minifiers that understand it will compress safely; invalid nesting fails earlier.
Shrink your stylesheet with the free CSS Minifier.
Minify markup with the HTML Minifier.
Build gradients to paste in with the CSS Gradient Generator.