CSS Minifier

1. Paste your CSS — Copy your CSS source code and paste it into the input area above. You can also upload a .css file or drag & drop it directly.
2. Choose a preset — Select Safe for zero-risk minification, Aggressive for the best balance (recommended), or Maximum to enable all optimizations. Or click "Advanced Options" to control each setting individually.
3. Click "Minify CSS" — The tool instantly processes your code and shows the minified result with before/after size comparison and a breakdown of what was removed.
4. Copy or Download — Click "Copy" to copy the minified CSS to your clipboard, or "Download .css" to save it as styles.min.css for deployment.

Beautify mode: Switch to the Beautify tab to format minified or poorly-indented CSS into clean, readable code with your preferred indentation — 2 spaces, 4 spaces, or tabs.

CSS files are one of the most impactful assets to optimize for web performance. Every CSS file must be fully downloaded and parsed before the browser can render your page — a process known as render-blocking. Minifying your CSS directly reduces this blocking time, improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP) — two of Google's Core Web Vitals ranking signals.

Our CSS Minifier is a best-in-class, free online tool that offers 10 granular optimization options with full control over what gets compressed:

• Comment removal — Strips /* ... */ comments, with an option to preserve /*! ... */ important license headers
• Whitespace collapsing — Removes all unnecessary spaces, tabs, and newlines, plus whitespace around { } : ; , operators
• Last semicolon removal — Removes the trailing semicolon before }, which is always safe per the CSS specification
• Zero unit removal — Converts 0px, 0em, 0rem, 0% to bare 0 — time units (0s, 0ms) are never touched
• Leading zero removal — 0.5 becomes .5, -0.75 becomes -.75
• Hex color shortening — #ffffff → #fff, #aabbcc → #abc
• Empty rule removal — Deletes .class { } blocks with no declarations
• Shorthand compression — margin: 10px 10px 10px 10px → margin: 10px
• Vendor prefix removal — Safely removes outdated -webkit-, -moz-, -o-, -ms- prefixes for properties now universally supported without them
• Protected tokens — url(), calc(), var(), min(), max(), clamp(), and quoted strings are never modified — spaces inside calc() are required by spec and always preserved

100% browser-based — your CSS code is never uploaded to any server. All processing runs entirely in your browser using JavaScript. No file size limits, no signup, no privacy concerns.

• calc() and url() are protected — Most basic online minifiers corrupt background: url("path with spaces") or break calc(100% - 20px) by removing the required spaces. Our tool automatically detects and protects all math functions and URL tokens before processing.
• 0s / 0ms time units are safe — transition: all 0s and animation-duration: 0ms are valid CSS. Our zero-unit removal only targets length and size values (px, em, rem, %) — never time or angle units.
• CSS variable (custom property) safe — --custom-property: 0px values and var() expressions are fully protected throughout the minification pipeline.
• Built-in Beautifier — Toggle to Beautify mode to format any minified CSS with your preferred indent style. Most competitor tools offer this as a separate page; ours is one click away.
• What was removed summary — After every minification, see exactly how many comments, whitespace characters, zero units, hex colors, and empty rules were removed. Not just a percentage — a full audit trail.
• 3 presets + 10 individual options — Start with Safe, Aggressive, or Maximum presets, then fine-tune any individual setting. Most tools offer all-or-nothing; ours gives you surgical control.
• Draft persistence — Your last CSS input is saved in localStorage and restored automatically when you return to the page. Never lose work-in-progress.

• Before deploying to production — Always serve minified CSS on live sites. The performance gains are immediate: smaller files download faster, parse faster, and reduce render-blocking time for every user visit.
• Optimizing WordPress themes — WordPress themes often have heavily commented style.css files. Minifying them can reduce size by 40–60%. Use the Safe preset and test your site visually after replacing the file.
• After building custom CSS frameworks — When generating a custom Bootstrap or Tailwind build, run it through the minifier before including it in your project.
• Email CSS optimization — HTML email clients have strict size limits. Minifying your email's inline CSS reduces the total message size and avoids Gmail's clipping threshold.
• React / Vue / Angular CSS-in-JS — Component CSS files and CSS modules benefit from minification, especially for large design system codebases.
• Improving Core Web Vitals scores — If your Lighthouse report shows "Eliminate render-blocking resources" or "Reduce unused CSS", minification is the first and easiest fix. Combine with GZIP on your server for maximum impact.

Pro tip: For best results, combine CSS minification with GZIP/Brotli compression on your server and proper Cache-Control headers for your CSS files. Use our .htaccess Generator to add compression and caching rules automatically.