Stylesheets grow comments, indentation and habits — and every byte ships to every visitor. This CSS minifier compresses your CSS by removing comments and the whitespace the language does not need, then reports the saving honestly: bytes before, bytes after, percentage saved.
It plays by CSS rules, not text-file rules: quoted strings are protected (a content: "a ; b" value survives untouched), spaces that are meaningful — between selector parts and multi-value properties like margin: 0 auto — are kept, and the redundant semicolon before a closing brace is dropped. All in your browser; nothing is uploaded.
What a CSS minifier removes
Comments first: /* ... */ blocks explain the code to its author and mean nothing to the browser. Then whitespace: newlines, indentation, and the spaces around { } : ; , that exist purely for human eyes. Then small redundancies, like the final semicolon in a declaration block, which CSS makes optional. What it must never remove is just as important: the space in .nav .item is a descendant selector, not decoration; the spaces in margin: 0 auto separate two values; and characters inside quoted strings are data, not code. A minifier that treats CSS as plain text will eventually break one of those — this one protects strings before touching anything.
A realistic example
The sample loaded in the tool is a typical hand-written snippet: a banner comment, spaced-out selectors, aligned colons. It minifies from a comfortable block into one dense line — same rules, same cascade, fewer bytes. On real projects the saving from whitespace and comments alone is usually 10-25% of the stylesheet; a build tool that also merges files and removes unused rules goes further, but that is a different job with different risks.
Where it matters, honestly
For a site served with gzip or Brotli, minified CSS compresses a little better again, and the two stack. The honest framing: CSS minification is a small, safe, permanent win — worth doing, not worth obsessing over. It matters most for email-client-embedded styles, third-party widgets you paste into other people’s pages, and very large design-system stylesheets shipped to low-end phones on slow networks, where every kilobyte of render-blocking CSS delays the first paint.
How to use it
Paste, click, compare the numbers, copy. If a design looks different afterwards, the cause is almost never the minifier — it is a pre-existing reliance on source order or a syntax error the browser was tolerating — but the safe workflow is the same as for any build step: minify, then look at the page. Because the tool runs locally, proprietary design-system code stays on your machine.
Frequently asked questions
Does minifying change how my CSS behaves?
No. The cascade, specificity and rule order are untouched; only comments and insignificant whitespace go. Spaces that carry meaning — in selectors, between values, inside strings and inside calc() — are preserved. (The calc() case is exactly why spaces around + and - are kept by this tool’s conservative rules when they sit inside values.)
Why is the saving smaller than I expected?
Probably because your CSS was already fairly tight, or because long class names and values — which a basic minifier does not shorten — dominate the file. Renaming classes is a build-pipeline decision with real breakage risk, not something a paste-in tool should do silently.
Can it minify CSS variables?
Custom properties (--brand-color) pass through like any other declaration, values included. The tool does not rename or inline variables — inlining changes semantics when variables are overridden by themes or media queries.
Is my code uploaded?
No. It is string processing in your browser tab, start to finish.
Related tools
Versión en español: Minificador de CSS — Minifica CSS Online, Gratis y al Instante. You may also like: HTML Minifier — Minify HTML Online and See How Much You Save.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.