CSS Minifier

What is the CSS Minifier?

CSS minification removes everything a browser does not need to apply the styles: comments, line breaks, indentation, the last semicolon in a rule and spaces around braces and colons. The result behaves identically but is typically 15 to 40 percent smaller, which means faster downloads and a quicker first render, especially on mobile networks.

Minification is one part of a performance strategy, alongside server compression (gzip or Brotli), caching and removing unused rules. Keep your readable source in version control and minify only the file you ship. If you ever need to read a minified stylesheet, the beautify mode reconstructs a tidy layout with one declaration per line.

When to use the CSS Minifier

Minify CSS before deploying a stylesheet that is not already handled by a build pipeline: a WordPress child theme, a landing page, an embedded widget or an email template. Smaller files improve Core Web Vitals such as Largest Contentful Paint because the browser can download and parse the render-blocking stylesheet sooner. The beautify mode is equally helpful when you inherit a minified file from a vendor and need to understand or adjust a few rules without hunting for the original source.

How to use the CSS Minifier

1. Paste your CSS into the input panel.
2. Choose Minify to compress or Beautify to expand.
3. Check the size comparison to see how many bytes you saved.
4. Copy the output or download it as styles.min.css.
5. Test the page to confirm that nothing visual has changed before deploying.

Examples

Source (118 bytes):

/* Buttons */
.btn {
  color: #ffffff;
  background-color: #0066cc;
  padding: 8px 16px;
}
.btn:hover { background-color: #0052a3; }

Minified:

.btn{color:#fff;background-color:#06c;padding:8px 16px}.btn:hover{background-color:#0052a3}

Common errors and tips

• Keep important license comments (/*! ... */) if your library licence requires attribution.
• Do not remove the whitespace inside calc(): calc(1px + 2px) needs spaces around + and -.
• Combine files first; fewer requests often matter more than a few extra bytes saved.
• Use source maps in production builds so browser dev tools can show the original line numbers.
• A syntax error such as a missing brace can swallow every rule after it; validate the source before minifying.

Privacy: runs entirely in your browser

Your stylesheet is processed locally in the browser tab; proprietary design code is never transmitted. This tool runs entirely in your browser: nothing you enter is uploaded, stored or logged on our servers, and it keeps working even if you go offline after the page has loaded.