CSS Minifier

Shrink your stylesheets by stripping comments and unnecessary whitespace — with a live before/after size comparison.

Note: this is a simple minifier — it removes comments and whitespace but does not restructure or merge rules the way build-tool minifiers do.

CSS to minify

/* Main layout */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

.button {
  background: #1d4ed8;
  color: white;
  border-radius: 8px; /* rounded corners */
}

Minified CSS

—

How it works

Minification deletes every byte the browser does not need to understand your stylesheet. First, /* … */ comments are removed with a string-aware pass, so a comment-like sequence inside a quoted value — for example content: "/* hi */" — is left untouched. Then all runs of whitespace collapse to nothing wherever grammar allows: around braces, colons, semicolons, and combinators like > and +. Redundant trailing semicolons before a closing brace are dropped too. What remains is semantically identical CSS in far fewer bytes, which means faster downloads on every page load. Because this is a deliberately simple minifier, it will not merge duplicate selectors or rewrite values — for maximum compression, pair it with a build tool like Lightning CSS or cssnano.