Shrink CSS by removing only the whitespace the grammar makes redundant — strings and url() bodies pass through untouched, calc() and descendant selectors keep their load-bearing spaces, and /*! license comments survive unless you explicitly choose otherwise. Free, no sign-up — runs locally in your browser.
Why minify CSS at all?
Stylesheets are written for humans: indentation, blank lines,
one declaration per line, comments explaining the sections.
Browsers need none of it. Minification strips the human layer
and keeps the machine layer, so the file that ships is smaller,
downloads sooner and parses faster — multiplied by every page
view of every visitor. It is the same argument as the CSS
Beautifier on this site, run in reverse: that tool adds the
human layer back for reading; this one removes it for shipping.
Keep your formatted source as the original you edit, and treat
the minified output as a build artifact, regenerated each time.
How to use this tool
- Paste your CSS, upload a .css file, or drop one on the panel.
- Choose the comment policy. The default keeps
/*! … */ license comments; change it only if you know none of your comments carry obligations. - Press Minify CSS. The panel reports bytes in, bytes out and the percentage saved.
- Copy or download the result. Structurally broken CSS is refused with the line and column of the problem rather than minified into differently-broken output.
What it removes — and what it refuses to touch
Removed: whitespace around { } : ; , > + ~ where
the grammar makes it redundant, the final semicolon of each
block, and comments per your policy. Preserved, always: string
literals and url(…) bodies byte-for-byte; the
space in a descendant selector like .nav :hover;
the spaces around + and − inside
calc() and friends, which CSS requires; the space
before ( in @media … and (…); and
single spaces between value tokens (margin: 0 auto,
font shorthands). Never done, at any setting: renaming classes
or variables, merging rules, reordering declarations, or
rewriting values like 0px → 0. Those
transforms save more bytes and occasionally break sites; this
minifier would rather be a few bytes larger and never wrong.
Worked example
This input, with its license header and section comment:
/*! Acme UI — MIT License */
/* Layout primitives */
.card , .panel {
margin : 0 auto ;
width : calc(100% - 24px) ;
}
.nav :hover { color : #0366d6 ; }
minifies, under the default comment policy, to:
/*! Acme UI — MIT License */
.card,.panel{margin:0 auto;width:calc(100% - 24px)}.nav :hover{color:#0366d6}
The license survives, the section comment goes, and both
load-bearing spaces — around the − in
calc(), and before :hover — are
still exactly where the semantics need them.
Frequently asked questions
Is minified CSS safe to ship as-is?
Yes, with one habit: eyeball a page that uses it. This minifier only removes characters the CSS grammar makes redundant — whitespace the parser ignores, the last semicolon of a block, spaces around punctuation — and it is deliberately conservative wherever whitespace can matter (descendant selectors, calc(), media queries). It never renames, reorders, merges or rewrites values, which is where aggressive minifiers occasionally break a site. Still, minification is a one-way trip: keep your formatted source as the editable original.
What happens to comments? Especially /*! license */ ones?
You choose, explicitly: 'Keep important comments' (the default) removes ordinary comments but preserves /*! … */ comments byte-for-byte — that bang is the convention build tools use to mark license and attribution blocks that must survive. 'Keep all' preserves every comment; 'Remove all' strips even the /*! ones. Removing a license comment can violate the license of the library it came from, which is why it is never the default and never happens silently.
Why did some spaces survive — like in .parent :hover or calc()?
Because those spaces are load-bearing. A space before :hover is a descendant combinator (.parent :hover styles hovered descendants, .parent:hover styles the parent itself), and CSS math functions require spaces around + and − (calc(100% - 10px) without them is invalid). Removing either would change what the stylesheet does, so this minifier keeps them. The savings are slightly smaller than a naive whitespace stripper's — and the output still works.
Why not minify fonts, images or URLs too?
url(…) bodies are passed through untouched, on purpose: a data URI's base64 payload and a relative path are both one careless edit away from a 404 or a corrupted image, and there is nothing to gain inside them. Optimising the assets themselves (compressing images, subsetting fonts) is a different job with different tools — this one only shrinks the stylesheet text.
How much smaller will my CSS get?
Typically 15–30% for hand-formatted CSS, less for CSS that is already compact. The panel reports the exact byte counts for your input. The larger win is often elsewhere: minified CSS also parses marginally faster and caches as one tight file — but if your stylesheet is served over HTTP/2 with gzip or Brotli, the wire saving shrinks further, because compression already eats most whitespace. Minify anyway for the parse and cache benefits; just measure honestly.
Will it minify CSS inside <style> tags or a full HTML file?
No — paste stylesheet text only. HTML around it would be treated as selector text and either garbled or refused. Extract the contents of the <style> element (the HTML Formatter on this site can help you find its boundaries), minify that, and paste it back.
Dev