CSS Minifier

How to Use

1. Paste or type your CSS code in the input area.
2. The minified output updates in real time.
3. See the size comparison showing bytes saved.
4. Copy the minified CSS with the copy button.

What CSS Minification Does

CSS minification reduces file size by removing characters that are not needed for the browser to interpret the styles. This includes comments, whitespace, newlines, and unnecessary semicolons. The visual result is identical — only the file size changes.

Optimizations Applied

• Remove all CSS comments (/* ... */).
• Collapse whitespace and newlines to single spaces.
• Remove space around selectors, colons, semicolons, and commas.
• Remove the trailing semicolon before closing braces.

Use Cases

• Web performance: Smaller CSS files load faster, improving page speed scores and user experience.
• Deployment pipelines: Minify CSS as part of your build process before deploying to production servers.
• CDN optimization: Reduce bandwidth costs and improve cache efficiency by serving minified stylesheets.
• Email templates: Many email clients have size limits for embedded styles; minification helps stay within those limits.
• Quick one-off tasks: Minify a CSS snippet without setting up a build tool like PostCSS or Webpack.

When to Minify

• Always serve minified CSS in production. Keep the original source for development and debugging.
• Combine minification with gzip or Brotli compression for maximum file size reduction.
• Use source maps in development so you can debug the original CSS while serving minified files.
• For large projects, consider a dedicated build tool (PostCSS, cssnano) that also performs advanced optimizations like merging duplicate rules.
• Minification is safe and reversible — it never changes how styles are rendered by the browser.

Privacy

All minification happens in your browser. No data is sent to any server.