🔧

CSS Minifier

Minify CSS code by removing whitespace, comments, and unnecessary characters. Reduce file size for faster page loads.

How to Use

  1. Paste your CSS code into the input area. The minifier accepts raw CSS, including stylesheets with comments, multi-line rules, and nested media queries — anything that's valid CSS will be processed.
  2. Click 'Minify' to compress your CSS. The tool strips all unnecessary whitespace (spaces, tabs, newlines), removes CSS comments, eliminates trailing semicolons, shortens hex color values where possible (e.g., `#ffffff` → `#fff`), and removes leading zeros from decimal values (e.g., `0.5s` → `.5s`).
  3. Copy the minified output with one click. The result is a single-line CSS string that's functionally identical to your original but significantly smaller — typically 20-60% file size reduction depending on how heavily commented your source CSS is.

Frequently Asked Questions

Does CSS minification change how my styles work?
No — proper minification is lossless. It only removes characters that the browser's CSS parser ignores (whitespace, comments). All selectors, properties, values, and media queries remain intact. The output CSS behaves identically to the original in every browser.
How much file size reduction can I expect?
Typically 15-30% for already-clean CSS and 30-60% for CSS with extensive comments and formatting. For example, a 100KB CSS file with generous spacing and comments often minifies to 60-70KB. The minifier shows the before/after sizes so you can see the exact savings.
Should I minify CSS in development or only in production?
Minification is a build-step optimization meant for production. In development, keep your CSS readable with comments and formatting for easier debugging. Use a build tool (Vite, webpack, PostCSS) or this minifier before deploying to production. The minified output is ideal for CDN hosting and HTTP caching.