CSS Minifier

About this tool

CSS Minifier strips all unnecessary characters from your stylesheet — whitespace, comments, redundant semicolons, and blank lines — without changing how the browser interprets a single rule. Paste your CSS and the tool instantly returns a compact version alongside a before/after byte-size comparison so you can see the exact saving. Typical stylesheets shrink 20–40%; comment-heavy or hand-formatted sheets often compress by more than half. Smaller CSS means faster HTTP transfers, reduced parse time, and a better Lighthouse performance score. The minifier handles media queries, pseudo-selectors, custom properties, calc() expressions, and @keyframes without mangling them. It works entirely in your browser — no file upload, no server round-trip, and nothing is stored. Use it as a final pre-deployment step, a quick audit of existing production CSS, or to understand what fraction of your.

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. Minification is the fastest, safest performance improvement available — zero risk of visual regression, zero code changes.

• Exact Byte Savings Shown: Most minifiers just hand you compressed output. This tool surfaces the before/after sizes and percentage reduction so you can make an informed decision about whether inline styles or a CDN cache header 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 are all preserved correctly. The minifier understands CSS structure rather than applying naive regex replacements that break complex selectors.

• 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 size bar beneath both panels to see original size, minified size, and percentage saved.
4. Click the Copy button to copy the minified CSS to your clipboard in one click.
5. Optionally click Download to save the result as a .min.css file ready for deployment.
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.