CSS Tools
CSS Minifier
Strip every byte the browser doesn't need — comments gone, whitespace collapsed, savings shown.
In short
Minify CSS online: strip comments and whitespace for the smallest stylesheet. Shows byte savings instantly. Free, fast, 100% in your browser.
By NaveenKumar T · Updated
Learn: Sass vs SCSS vs LESS vs Stylus: Choosing a CSS Preprocessor
- Real CSS parsing
- Exact error positions
- Choose your indentation
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
Minify CSS: input and output
A readable footer stylesheet with a license banner, an explanatory comment, a calc() value and a media query.
/*! site-footer v3 | MIT License */
/* Four-column layout, centred with calc() */
.site-footer {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
padding: 3rem calc(50% - 36rem);
background: #111827;
color: #9ca3af;
}
.site-footer a { color: inherit; }
.site-footer a:hover, .site-footer a:focus { color: #ffffff; text-decoration: underline; }
.site-footer > .legal { grid-column: 1 / -1; font-size: 0.875rem; }
@media (max-width: 768px) { .site-footer { grid-template-columns: 1fr; padding: 2rem 1rem; } }/*! site-footer v3 | MIT License */ .site-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding:3rem calc(50% - 36rem);background:#111827;color:#9ca3af}.site-footer a{color:inherit}.site-footer a:hover,.site-footer a:focus{color:#ffffff;text-decoration:underline}.site-footer>.legal{grid-column:1 / -1;font-size:0.875rem}@media (max-width:768px){.site-footer{grid-template-columns:1fr;padding:2rem 1rem}}The /*! */ license survives while the ordinary comment is gone; the spaces inside calc(50% - 36rem) and 1 / -1 are intact, the closing semicolon of every block is dropped, and #ffffff and 0.875rem are left exactly as written.
Learn more
What CSS minification removes
Minification removes what only humans use: comments, indentation, line breaks, the final semicolon in each block. Rendering is identical — the parser sees the same rules — but typical sheets shrink 15–30% before gzip even starts.
License banners written as /*! ... */ survive minification by convention, so attribution requirements stay satisfied.
How much minification really buys you
Set expectations with arithmetic: a hand-written 60 KB stylesheet typically minifies to 42–50 KB, and the gzip/brotli compression your server applies shrinks both versions further — to roughly 9 KB and 8 KB respectively. The wire savings of minification after compression are real but modest; the bigger wins are parse time on low-end phones and cache storage. Translation: minify in production because it's free, but don't expect it to rescue a bloated stylesheet — auditing unused rules saves far more.
The before/after readout here makes those trade-offs concrete per file, which is exactly the data you need when deciding whether an email template (where gzip often doesn't apply) is worth hand-tuning.
Help
Frequently asked questions
Everything you need to know about the Minify CSS.
01How do I use the Minify CSS?
Paste your stylesheet and press Minify. Comments (except /*! */ license banners), whitespace and the final semicolon in each block disappear, and the status bar shows the exact byte savings.
02Should I minify before or after bundling?
In build pipelines, minification is the last step after bundling. This tool covers the manual cases — a hand-edited stylesheet, an email template, a quick payload check — and its before/after sizes are an honest preview of what your build step will achieve.
03What does the minifier strip, and what does it deliberately leave alone?
Removed: every /* */ comment except /*! */ banners, all newlines and indentation, spaces around braces, colons, semicolons, commas and the >, + and ~ combinators, and the last semicolon before each closing brace. Left alone: spaces inside values (1px solid, 0 auto, calc(100% - 2rem)), so nothing is re-parsed — and values are never rewritten: #ffffff isn't shortened, 0px keeps its unit, duplicate rules aren't merged. The one value to double-check is addition inside calc(): + also serves as the sibling combinator, so calc(1rem + 2px) loses its spaces.
Keep working
Related tools
CSS Formatter
CSS Tools
HTML Minify
Smaller pages, identical rendering — comments stripped and whitespace collapsed with pre/script/style protected.
JSON Minifier
Compress JSON to its smallest valid form by stripping every unnecessary character — with full validation built in.
SCSS / Sass to CSS
CSS Tools
CSS to LESS
CSS Tools
CSS to Stylus
CSS Tools