Skip to main content

CSS Minifier Online: Compress CSS & Cut File Size

Paste CSS and get a minified, single-line stylesheet that strips comments and whitespace to cut 20–30% of bytes. Free and 100% in your browser.

CSS Input
0 chars
Minified CSS
0 chars
Optimization: Instant
Privacy: 100% Client-Side

Instant Processing

CSS minifies as you type, recomputed on every keystroke.

Size Reduction

See exact original vs minified bytes and percentage saved.

100% Private

All processing happens locally. Your code never leaves your browser.

CSS Minifier: Compress Stylesheets and Cut File Size

A CSS minifier strips comments, line breaks, and excess whitespace from a stylesheet so the browser downloads fewer bytes without any change to how the page renders. Paste your CSS, get a single-line minified result, then copy it or download a .css file. Minification alone typically removes 20–30% of a stylesheet's weight. It runs 100% in your browser — free, with no upload.

How to minify CSS

  1. Paste or type your stylesheet into the CSS Input panel, or press Example to load a sample.
  2. The Minified CSS panel updates instantly — output is recomputed on every keystroke, no button needed.
  3. Read the stats bar for the exact original size, minified size, and percentage saved.
  4. Press Copy to send the result to your clipboard, or the download icon to save it as toolk-minified.css.
  5. Need it readable again? Press Clear, or send it to the CSS Beautifier to restore indentation.

What CSS minification actually removes

Browsers ignore comments and whitespace between tokens, so minification deletes the characters that exist only for humans. This tool performs safe, text-level transforms in a fixed order: it removes /* ... */ comments, collapses every run of whitespace to a single space, deletes spaces around the delimiters { } : ; , > ~ +, and drops the optional final semicolon before each closing brace. Per the CSS syntax spec on MDN, none of those characters carry meaning, so the parsed result is identical.

CSS is a render-blocking resource: the browser cannot paint until it has downloaded and parsed every stylesheet to build the CSS Object Model. As web.dev puts it, CSS blocks rendering because later rules can override earlier ones, so the CSSOM must be complete first. Fewer bytes on that critical path means a faster first paint, which is why minification feeds Core Web Vitals like Largest Contentful Paint.

Worked examples: input → output

Whitespace + trailing semicolon

.box { color: red; padding: 8px; }

→ .box{color:red;padding:8px}

Comments stripped, combinators tightened

/* nav */ ul > li { margin: 0; }

→ ul>li{margin:0}

Edge case · colors and zero units are left untouched

Input .h{ color: #ffffff; margin: 0px; } minifies to .h{color:#ffffff;margin:0px}not #fff or 0. This is a safe minifier, so it never rewrites values. For color shortening, zero-unit stripping, and shorthand merging, run a build-time minifier like cssnano or Lightning CSS after this pass.

What gets removed, and what does not

Every transform below is text-level and reversible in layout (not in comments). Use it to predict the output before you paste a full stylesheet.

Source tokenActionResult
/* comment */Removed(deleted)
Newlines, tabs, runs of spacesCollapsed to one space, then trimmedsingle line
Spaces around { } : ; , > ~ +Removeda>b{c:d}
Last ; before }Removed (optional)c:d}
Colors, zero units, shorthandsKept as-is#ffffff, 0px

Minify first, then let the server compress

Minification and compression are different layers, and stacking them beats either alone. Minification runs once (here, or in your build) and rewrites the source. Gzip and Brotli run on every request at the server, re-encoding bytes during transfer. Minification removes roughly 20–30%; Brotli on top reaches up to 95%, so together they commonly cut 80–90% of the original CSS weight. The order matters: minify, then compress.

One honest limit: this tool treats CSS as plain text and never parses it. That makes it safe and instant for any stylesheet, but it also means it will not merge four margin-* properties into one, shorten #ffffff to #fff, or drop overridden rules. Those value-level optimizations belong in a build-time tool. If your bundler already runs cssnano or Lightning CSS in production, you do not need to minify again here — use this for one-off snippets, inline styles, and quick byte audits.

Runs 100% in your browser

Your CSS never leaves your device. Minification happens locally in JavaScript and the result is copied with your browser's native clipboard — no uploads, nothing leaves your device. I tested it on the bundled example, on multi-rule stylesheets with nested media queries and combinators, and on input containing block comments. Comments and whitespace vanish, selectors and values stay byte-for-byte identical, and the stats bar reports the exact saving per run.

Frequently asked questions

Is this CSS minifier free?

Yes — 100% free with no signup and no usage cap. Minify any size stylesheet, then copy or download the result at no cost.

Does it run in my browser or upload my code?

Nothing is uploaded. The minifier runs in your browser with JavaScript, so your CSS never reaches a server and the tool works offline once the page loads.

Will minifying change how my site looks?

No. Only comments and whitespace the browser ignores are removed. Selectors, properties, values, and media queries stay identical, so the rendered page is unchanged.

Can I reverse the minification?

You cannot recover removed comments, but the CSS Beautifier restores indentation and line breaks for debugging.

Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.

Need a different tool?

Browse all 89 free, in-browser tools — or tell us what we should build next.

Browse all tools