🎨 CSS Minifier
Remove comments, whitespace, and redundant characters from CSS to produce the smallest possible stylesheet for production. Also shows the compression ratio achieved.
How to Use the CSS Minifier
The CSS Minifier reduces the size of your CSS stylesheets by removing comments, collapsing whitespace, and applying micro-optimizations — all in your browser, instantly. Paste your CSS into the left panel and click Minify CSS. The minified output appears in the right panel, and a summary shows the original size, compressed size, and percentage saved. Click Copy to copy the minified CSS to your clipboard.
The minifier applies several optimizations: it removes all CSS comments (/* … */), collapses multiple spaces and newlines into single spaces, removes spaces around delimiters like {, }, :, ;, and ,, removes the last semicolon before }, shortens 0.5 to .5, collapses 0 0 0 0 to 0, and shortens 6-digit hex colors to 3-digit where possible (e.g., #aabbcc → #abc). Click Sample to try a demonstration stylesheet. This tool is ideal for preparing CSS for production deployment to reduce page load time.
Frequently Asked Questions
What is CSS minification?
›
CSS minification is the process of removing all unnecessary characters from CSS source code — comments, whitespace, newlines, and redundant syntax — without changing its functionality. The result is a smaller file that loads faster. A typical CSS file can be reduced by 20–40% through minification alone. Minified CSS is harder for humans to read, so always keep the original source file and only serve the minified version in production.
How much can CSS minification reduce file size?
›
Minification typically reduces CSS file size by 20–40%. When combined with Gzip or Brotli compression (applied automatically by most web servers and CDNs), total transfer savings can reach 70–80% compared to the original uncompressed file. For large CSS frameworks like Bootstrap or Tailwind, the minified and compressed output can be 10x smaller than the original source.
Should I also use CSS compression (Gzip/Brotli)?
›
Yes — minification and compression work together. Minification removes redundant characters, making the file smaller. Gzip or Brotli compression then further reduces the transfer size by encoding repeating patterns efficiently. Most web servers (Nginx, Apache) and CDNs (Cloudflare, Vercel, Netlify) apply Gzip or Brotli compression automatically. You do not need to configure this manually — just serve the minified file.
What is the difference between CSS minification and CSS purging?
›
Minification removes whitespace and comments from all your CSS rules. CSS purging (or tree-shaking) removes entire CSS rules and selectors that are not used by any HTML in your project. Purging is much more aggressive — Tailwind CSS PurgeCSS can reduce a full Tailwind stylesheet from 3MB to under 10KB by removing unused utility classes. Tools like PurgeCSS, UnCSS, or Tailwind's built-in content scanning perform purging.