UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Minifier

Minify CSS by removing comments and whitespace

About CSS Minifier

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 CSS Minifier

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 CSS Minifier

  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 to use CSS Minifier

  • 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

Basic rule with comments

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

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

Media query with nested rules

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

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

CSS custom properties

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

Output: :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

Will minification break my CSS selectors or media queries?▾
No. The minifier only removes whitespace and comments that have no effect on CSS specificity, cascade order, or computed values. Selectors, at-rules, pseudo-classes, and all property values are passed through unchanged.
How much size reduction should I expect?▾
Hand-written CSS with generous formatting typically shrinks 20–35%. Comment-heavy files or code exported from design tools can shrink 40–60%. Already-compact CSS may only shrink 5–10%.
Does the tool handle vendor-prefixed properties like -webkit- and -moz-?▾
Yes. Vendor prefixes are treated as standard property names and are preserved in full. Only the surrounding whitespace and comments are removed, leaving every prefixed rule intact.
Can I minify a CSS file instead of pasting text?▾
The current version accepts pasted text. For a file workflow, open the CSS in any text editor, select all, paste here, then copy the output and overwrite the original file with your editor's save.
Is the output safe to use directly in a <style> tag or as an external .css file?▾
Yes. Minified CSS is syntactically valid and can be used anywhere you would use the original. Browsers parse minified and formatted CSS identically.
What happens to @charset and @import rules at the top of the file?▾
@charset and @import declarations are preserved in their original positions and are not reordered or removed, since moving them would change how the browser processes the stylesheet.
Does it support CSS custom properties (variables)?▾
Fully. Custom property declarations like --brand-color: #f5c842 and var() references are preserved exactly because they are part of the property value, not structural whitespace.
Will removing comments affect source maps or debugging?▾
This tool does not generate source maps. If you need source maps for DevTools debugging, keep the unminified version in your repository and use this tool only for the production artefact.

Explore the category

HTML Minifier Minify HTML by removing comments and unnecessary whitespace while preserving valid markup. JavaScript Minifier Minify JavaScript by removing comments, trimming whitespace, and outputting cleaner code instantly in your browser. SQL Minifier Minify SQL by removing comments and redundant whitespace safely. CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. CSS Triangle Generator Create directional CSS triangles using the transparent border technique with sizing controls.
CSS Minification: What It Does and Why Every Byte Matters CSS minification strips out whitespace, comments, and unnecessary characters without changing any rules. On large stylesheets the savings ar May 2026 · 7 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

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.