CSS Minifier

What CSS Minification Does

CSS minification removes characters from a stylesheet that exist purely for human readability — comments, indentation, line breaks, and unnecessary whitespace around selectors, properties, and values — without changing which styles apply or how a page looks. A browser's CSS parser doesn't care about formatting; it only needs the selectors, property names, and values in the right structure. Stripping the formatting reduces file size, which speeds up download time and, since CSS is typically render-blocking, can directly improve how quickly a page becomes visually complete. Minification is standard practice in production front-end builds and is usually handled automatically by tools like Webpack, Vite, or a CDN's optimization layer, but this tool is useful for quickly minifying a standalone stylesheet or checking exactly what a minifier changes.

How This Minifier Works

Paste your CSS into the left panel and click Minify CSS. With Remove Comments enabled, every /* ... */ comment block is stripped. With Collapse Whitespace enabled, runs of spaces, tabs, and line breaks are reduced, and unnecessary whitespace around structural characters — braces, colons, semicolons, and commas — is removed, along with the trailing semicolon before a closing brace, which is optional in CSS syntax. Critically, this tool protects the contents of quoted strings and url() references from whitespace collapsing, since a string like content: "Hello World" or a path inside url("my file.png") can be semantically meaningful, and mangling whitespace inside them would change behavior rather than just formatting. The optional Shorten Leading Zeros setting converts values like 0.5em to .5em, a widely supported shorthand that saves a byte per occurrence — left off by default since it's a cosmetic-only change some teams prefer to keep explicit for readability in version-controlled source.

What This Tool Deliberately Avoids

Some aggressive CSS minifiers merge duplicate selectors, reorder properties for better gzip compression, or restructure shorthand properties (like collapsing four separate margin-* declarations into one margin line). Those transformations require a full CSS parser that understands specificity and the cascade to apply safely — a regex-based tool that attempts them risks silently changing which rule wins when styles conflict, which can be far more damaging than a slightly larger file. This tool sticks to changes that are unambiguously safe regardless of the surrounding stylesheet: removing comments and collapsing whitespace that has zero effect on the parsed rule set. For selector merging, property reordering, or vendor-prefix management, a build-time tool with a real CSS AST (such as cssnano or Lightning CSS) is the more appropriate choice, since those tools can verify their transformations preserve behavior.

Why Protecting Strings and url() Matters

A regex-based minifier that blindly collapses all whitespace can quietly break a stylesheet in ways that are hard to trace back to the minification step. Font stacks with multi-word names in quotes, generated content strings set via the content property, and file paths inside url() — including data URIs, which can be thousands of characters long and contain characters that look structural — all need their internal whitespace and characters left untouched. This tool identifies and temporarily protects those sections before applying any whitespace or comment stripping, then restores them exactly as they were once the rest of the stylesheet has been minified, so the parts of your CSS that depend on exact character sequences are never altered.

Best Practices for CSS Delivery

Combine minification with proper HTTP caching headers and, where your hosting supports it, gzip or Brotli compression — compression and minification are complementary, since compression algorithms work even better on already-minified text with reduced redundant whitespace. Keep an unminified, well-commented source stylesheet in version control and treat the minified output purely as a build artifact for production, since debugging a layout issue directly in minified CSS is far harder than in the original formatted source. For larger projects, prefer wiring minification into your build pipeline (via a bundler or static site generator) so it happens consistently and automatically, using a tool like this one mainly for quick one-off checks, embed widgets, or standalone stylesheets that don't go through a formal build step.