CSS Minifier

About this tool

CSS Minifier strips comments, collapses whitespace and removes the last semicolon before each closing brace. Paste your CSS and the minified version appears as you type, with input and output byte counts so you can see the saving. Typical hand-formatted stylesheets shrink 20–40%; comment-heavy sheets can shrink by more than half. Smaller CSS means faster HTTP transfers and less to parse. Quoted strings are protected, spaces inside calc() and similar functions are kept, and custom properties, media queries and @keyframes pass through. The minifier uses pattern-based rules rather than a full CSS parser, so it removes spaces around every colon, comma and > — a selector such as .nav :focus becomes .nav:focus, which changes what it matches. Review the output before replacing production styles. It works entirely in your browser — no file upload, no server round-trip, and nothing is stored.

Why use it

• Instant Load-Time Win: Every kilobyte removed from your CSS is a kilobyte the browser doesn't have to download before it can start rendering, and minifying needs no changes to your source files.

• Exact Byte Counts Shown: Input and output byte counters show the size before and after, so you can judge whether minification is enough or whether caching or inlining would help more.

• Comment Removal Built-In: License headers, TODO notes, and section dividers are useful during development but invisible to users and costly in bytes. The minifier strips all comment blocks, including multi-line /* */ styles, automatically.

• No Build Tool Required: Projects without a webpack, Vite, or PostCSS pipeline still need minification. This tool handles it with a paste-and-copy workflow that works for any project size, stack, or deployment target.

• Handles Modern CSS: Custom properties (--vars), calc(), clamp(), nesting, @layer and @keyframes pass through; quoted strings are protected and the spaces inside calc() are kept.

• Completely Private: Your CSS runs through browser-side JavaScript only. Proprietary design tokens, internal class names, and unreleased UI code never leave your machine — no analytics on content, no server logs.

How to use

1. Paste your raw CSS into the input panel on the left.
2. The minified output appears instantly in the right panel — no button required.
3. Check the Input bytes and Output bytes counters below the result to see the saving.
4. Click 'Copy result' to copy the minified CSS to your clipboard.
5. Review selectors that have a space before a colon, such as .nav :focus — the minifier removes that space.
6. If you edit the input after copying, the output and size stats update automatically in real time.

When it helps

• Before deploying a static site or updating a CDN-hosted stylesheet for a production release.
• When auditing an existing production site and you suspect the CSS hasn't been minified in the current pipeline.
• After hand-writing CSS without a build tool and needing a quick minification step before shipping.
• When comparing the output of different CSS preprocessors or frameworks to understand their whitespace overhead.
• After copying CSS from design tools like Figma exports that include verbose comment blocks and redundant formatting.
• When testing whether minification alone is enough to pass a Lighthouse performance threshold without restructuring the stylesheet.

Examples

/* Primary button styles */
.btn-primary {
  background-color: #f5c842;
  color: #0d0d0d;
  padding: 10px 20px;
  border-radius: 8px;
  /* Remove default border */
  border: none;
  cursor: pointer;
}

.btn-primary{background-color:#f5c842;color:#0d0d0d;padding:10px 20px;border-radius:8px;border:none;cursor:pointer}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .main-content {
    width: 100%;
    padding: 16px;
  }
}

@media (max-width:768px){.sidebar{display:none}.main-content{width:100%;padding:16px}}

:root {
  --bg: #0d0d0d;
  --accent: #f5c842;
  --radius: 8px;
}

.card {
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
}

:root{--bg:#0d0d0d;--accent:#f5c842;--radius:8px}.card{background:var(--bg);border-radius:var(--radius);border:1px solid var(--accent)}

Tips

• Paste your CSS before and after a redesign to compare savings — sometimes a refactor that looks cleaner actually adds bytes.
• Keep the unminified source in version control and only commit the .min.css output to your deployment branch or CDN upload.
• If your minified output is still large, check for duplicate rules or unused selectors — minification compresses but doesn't deduplicate.
• Combine minification with gzip or Brotli compression on your server; the two techniques compound and can reduce transfer size by 80–90%.
• For critical CSS inlined in <head>, even small reductions matter — every byte here delays first paint, so minify aggressively.

Frequently Asked Questions

Glossary

Minification

The process of removing all characters from source code that are not required for execution or rendering — spaces, newlines, comments — to reduce file size without changing behaviour.

Critical CSS

The subset of CSS rules needed to render above-the-fold content. Inlined in <head> to eliminate a render-blocking stylesheet request; must be aggressively minified.

Gzip

A lossless compression algorithm applied by web servers to text assets before transfer. Works best on repetitive text; minified CSS compresses even further with gzip enabled.

Custom Property

A CSS variable declared with a -- prefix, e.g. --color-brand, that can be referenced with var(). Preserved by minifiers because the value is semantic, not formatting.

@keyframes

A CSS at-rule that defines animation keyframe stops. Minifiers must understand @keyframes block structure to avoid accidentally collapsing percentage values into invalid syntax.

Whitespace Collapsing

Reducing consecutive spaces, tabs, and newlines in source code to nothing (or a single space where required by syntax) — the primary technique behind CSS minification.