Quick Tools

CSS Minifier

Paste CSS and minify it in your browser. Strip comments and extra whitespace, then copy or reuse the compact stylesheet. No signup.

Minification happens in your browser. Your stylesheet never leaves your device.

CSS Minifier — Compress Stylesheets Online

Every byte counts when you are shipping stylesheets to visitors. Minified CSS loads faster, parses sooner, and costs less bandwidth — especially on mobile connections where every kilobyte adds latency. A CSS minifier strips the parts a browser does not need: comments, line breaks, indentation, and unnecessary whitespace. The result is the same stylesheet at a fraction of the size.

This tool runs entirely in your browser. The CSS you paste is never sent to a server. You get a compact, production-ready stylesheet that you can copy back into your project or hand off to a build pipeline. No signup, no upload, no waiting.

Why minify CSS

Browsers do not care about whitespace. The parser skips over comments, line breaks, and extra spaces without affecting how your page renders. That means everything you add for human readability — a comment above a component, indentation inside a media query, a blank line between sections — is pure overhead for the machine.

Minifying CSS helps you:

  • Reduce file size. A typical stylesheet shrinks by 20–40% after minification. On a site with multiple stylesheets that saving adds up quickly.
  • Improve load time. Smaller files download faster and parse sooner, which can shave milliseconds off your first contentful paint.
  • Clean up output. Build tools, email platforms, and third-party widgets often ship minified CSS. Running it through a minifier confirms that the output is as compact as it should be.
  • Obfuscate lightly. Minification is not encryption, but it makes casual inspection harder. If you share a snippet publicly and want it to be harder to copy-paste without effort, minification is a quick step.

Minification is not a replacement for proper compression. For production you should still serve CSS with gzip or Brotli. But minification is a baseline optimization that costs nothing and works everywhere.

How to use

Paste CSS

Open the CSS source textarea and paste your stylesheet directly. A single rule, a full page of styles, or a minified block you want to compress further — all of the same input works. The textarea is editable, so you can also type or tweak CSS directly before minifying.

Minify CSS

Click Minify CSS to compress the content of the textarea. The minifier removes comments, collapses all whitespace into a single space, strips spaces around braces and separators, and removes the final semicolon before each closing brace. The result appears in the Minified CSS box below.

If the textarea is empty, you will see a friendly prompt asking you to paste CSS first.

Copy the result

Click Copy minified CSS to write the compressed stylesheet to your clipboard. A short confirmation appears so you know the copy succeeded. If the clipboard API is unavailable, the content stays in the Minified CSS box for manual selection.

Clear

Click Clear input to empty both textareas and reset the widget. All buttons return to their default disabled state until you paste new CSS.

Example

Here is a typical before-and-after. The input is a readable stylesheet with comments, indentation, and spacing. After minification the same rules are a single compact line.

Before — readable:

/* Layout */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Typography */
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #111;
}

/* Link style */
a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration:underline;
}

After — minified:

.container{max-width:720px;margin:0 auto;padding:0 1rem}h1{font-size:2rem;margin-bottom:1rem;color:#111}a{color:#0066cc;text-decoration:none}a:hover{text-decoration:underline}

Notice that comments are gone, indentation is gone, line breaks are gone, and the final semicolons inside each rule have been removed. The stylesheet still declares the same rules in the same order, but it is now a fraction of the original size.

Strings stay intact. If you have content: " " or url("image.png") inside your CSS, those spaces and parentheses are preserved exactly as written.

Tips for cleaner output

  • Minify after formatting. If you start with messy or minified CSS, run it through the CSS Formatter first. That normalizes the structure so the minifier can strip whitespace predictably.
  • Keep a readable copy. Minified CSS is hard to edit. Save the original stylesheet in your source control and only minify when you are ready to ship.
  • Combine with compression. Minification removes redundant bytes. Serving the result with gzip or Brotli compresses it further.
  • Test after minification. If your stylesheet behaves differently after minifying, the original likely had a syntax issue that whitespace was masking. Run it through the formatter to find the problem.

FAQ

Does the minifier upload my CSS to a server?

No. The entire process runs in your browser using client-side JavaScript. Nothing leaves your device.

What happens if my CSS has syntax errors?

The minifier will still attempt to compress whatever you paste. It does not validate your stylesheet. If the input is malformed the result may not be ideal, but the tool will not crash. If something goes wrong during processing a friendly message appears instead of an empty screen.

Can I minify a fragment, or only full stylesheets?

Both. Paste a single rule, a group of selectors, or an entire file. The minifier removes comments and whitespace regardless of the input size.

Does minification change how my CSS works?

No. The minifier only removes comments and whitespace that browsers ignore during parsing. The cascade, specificity, and computed styles are identical before and after.

What about strings and URLs?

Content inside strings — including url() values and the content property — is preserved exactly. Spaces, quotes, and parentheses inside strings are never altered.

Can I undo minification?

The minifier does not add back comments or indentation. If you need the readable version again, use the CSS Formatter on the original stylesheet. That is why keeping a readable copy in your project is a good practice.

Related tools

  • CSS Formatter — beautify and indent CSS stylesheets with the same browser-side approach.
  • HTML Formatter — beautify and indent HTML markup when you need to pair readable styles with readable markup.

Related tools