CSS Minifier

Minify CSS for faster websites

CSS files block rendering: the browser waits for your stylesheet before it shows the page. The smaller the file, the sooner visitors see content. This CSS minifier removes everything the browser does not need and applies safe shortcuts to reduce the size further.

How to minify CSS

1. Paste your stylesheet into the left box.
2. Click Minify CSS.
3. Copy the result or download it as style.min.css.

What the CSS minifier does

• Removes comments, except those starting with /*!, which usually hold licence notices.
• Removes line breaks, indentation and spaces around { } : ; ,.
• Removes the last semicolon in each rule.
• Shortens values: 0px becomes 0, 0.5 becomes .5 and #ffffff becomes #fff.
• Removes empty rules.
• Leaves text inside quotes unchanged.

Best practice

Keep your original, readable CSS for editing and publish only the minified copy. Most build tools and WordPress caching plugins can minify automatically, but this tool is handy for quick jobs, landing pages and email templates. Minify your markup too with the HTML minifier, or format data with the JSON formatter.

Example

Before:

/* Buttons */
.btn {
    color: #ffffff;
    padding: 0px 16px;
    opacity: 0.8;
}

After:

.btn{color:#fff;padding:0 16px;opacity:.8}

Why CSS size matters

CSS is render-blocking: the browser waits for your stylesheets before it shows the page. Every kilobyte you remove from the critical CSS helps the page appear sooner, which improves First Contentful Paint and Largest Contentful Paint. Google PageSpeed Insights flags unminified CSS as an opportunity for exactly this reason.

Safe optimisations used

• Removing comments (licence comments starting with /*! are kept)
• Removing whitespace and line breaks
• Shortening colours: #ffffff → #fff
• Removing units from zero values: 0px → 0
• Dropping leading zeros: 0.8 → .8
• Removing the last semicolon and empty rules

Text inside quotes, such as content: "…" and font names, is never changed.

More ways to speed up CSS

• Remove unused CSS from large frameworks.
• Combine small stylesheets to reduce requests.
• Inline the critical above-the-fold CSS and load the rest later.

Minify your markup too with the HTML minifier.

Frequently asked questions