CSS Minifier & Formatter

What Is This Tool?

A CSS minifier rewrites a stylesheet to be as small as possible without changing how it renders: it strips comments and whitespace, shortens color values and zero units where safe, merges duplicate rules, and removes redundant semicolons.

This tool is built on clean-css, a CSS optimizer that actually parses the stylesheet into an AST rather than using regex, which is why it can safely handle edge cases that break naive minifiers — CSS custom properties (--main-color: ...), content inside strings, and complex selectors and media queries all come out correct.

Why Use It?

• AST-based minification (clean-css), not regex — safe with custom properties, strings and nested media queries.
• Level 2 optimizations merge and simplify rules for extra savings beyond simple whitespace removal.
• See exactly how many bytes and what percentage you saved.
• Format mode turns a minified stylesheet back into readable CSS with consistent indentation.
• 100% local processing — proprietary or unreleased styles never leave your browser.

How to Use

1. Paste your CSS into the input box, or click "Load Example" to try a sample with a custom property and a media query.
2. Click "Minify" to compress it, or "Format" to beautify it with 2-space indentation.
3. Check the message under the boxes — minify mode shows the size reduction; invalid CSS shows a clear error instead of silently producing broken output.
4. Click "Copy" to grab the result.

Example

Input

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Output

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

The custom property, media query and cascade order are all preserved — only whitespace, comments and redundant characters are removed.

Practical tips

• Minify at build/deploy time, not during development — edit the readable source and let this tool (or your build pipeline) produce the shipped version.
• If you're debugging why a page looks different in production, formatting the minified CSS first makes the diff against your source much easier to read.
• Custom properties survive minification, so design-token-based stylesheets (using --spacing, --color-*, etc.) are safe to run through this tool.
• Combine with the HTML and JS minifiers below if your project keeps everything in separate files before a release.

Where this fits in real workflows

CSS is one of the higher-leverage things to minify because stylesheets are render-blocking by default — every byte trimmed from a stylesheet can shave a small amount off first paint, especially on slower connections. It's a smaller win than image optimization, but it's essentially free once wired into a build step.

The Format direction is useful for the opposite problem: inspecting a competitor's or a legacy production stylesheet that's shipped minified, to understand its structure before writing an override or a redesign.

→ HTML Minifier · JS Minifier

Common use cases

• Shrinking a stylesheet before deploying a static site or landing page.
• Reformatting a minified CSS file pulled from a live site to study its structure.
• Cleaning up CSS exported from a design tool, which often includes excessive comments and whitespace.
• Quickly checking whether a hand-written CSS snippet parses correctly, since malformed CSS surfaces as an explicit error.

Frequently Asked Questions