CSS Minifier
Free online CSS minifier. Compress CSS code by removing whitespace, comments and unnecessary characters. Reduce stylesheet size for faster page loads. All processing is local and private.
How to Use CSS Minifier
Paste Your CSS
Paste CSS code into the input panel. The tool accepts any valid CSS — single rules, entire stylesheets, or CSS with vendor prefixes and media queries.
Minify the Stylesheet
Click "Minify" to strip whitespace, comments, unnecessary semicolons, and trailing zeros. The output is a compact single-line CSS string ready for production.
Copy the Result
The minified CSS appears in the output panel. Check the size reduction percentage. Use the minified version in production to reduce page load time.
What Gets Removed
| Removed | Example |
|---|---|
| Comments | /* Main styles */ → removed |
| Whitespace | Indentation, line breaks → collapsed |
| Last semicolon | color: red;} → color:red} |
| Leading zeros | 0.5em → .5em |
| Hex colors | #ffffff → #fff (when possible) |
Typical reduction: 20-40% for formatted CSS, 5-10% for already-compact CSS.
Frequently Asked Questions
What does CSS minification remove?
CSS minification removes: all comments (/* */), unnecessary whitespace (spaces, tabs, line breaks), the last semicolon in a rule block, leading zeros from decimal values (0.5em → .5em), and units from zero values (0px → 0). It also compresses hex colors where possible (#ffffff → #fff) and removes empty rules. The output is functionally identical to the input — only formatting changes.
How much smaller will my CSS get?
Typical reduction: 20-40% for well-formatted CSS, 5-10% for already-compact CSS. Most savings come from removing indentation and line breaks. Combined with gzip/brotli compression on your server, the actual bandwidth savings are smaller because whitespace compresses very well. CSS minification is a best practice but don't expect dramatic page speed improvements from it alone.
Will minification break my CSS?
No, our minifier preserves CSS semantics. It only removes characters that the CSS parser ignores — whitespace and comments. It will not change selectors, property values, or the cascade order. However, if your CSS contains unclosed comments or has syntax errors, the minified output may behave differently. Always test minified CSS before deploying to production.
Should I minify CSS during development?
No. Keep readable CSS with comments during development. Minify as a build step using tools like PostCSS (cssnano), CleanCSS, or your bundler's production mode (Webpack, Vite). Use this tool for quick checks, one-off optimizations, or when you need to inline minified CSS into critical path rendering.
CSS Optimization Pipeline
Minification is one step in a CSS optimization pipeline. For the best results, combine it with other techniques.
Recommended Pipeline
- Remove unused CSS: Use PurgeCSS or browser DevTools Coverage panel to find and remove unused rules
- Autoprefix: Add vendor prefixes automatically with Autoprefixer
- Minify: Compress the final output with this tool or cssnano in your build pipeline
- Compress: Enable gzip/brotli on your server for additional 70-80% size reduction