CSS Minifier

About the CSS Minifier

Every byte counts for page speed. The CSS Minifier reduces the size of your stylesheets by removing comments, line breaks, indentation and extra spaces, dropping the last semicolon in each block, shortening colors like #ffffff to #fff, removing units from zero values and deleting empty rules.

Smaller CSS files download and parse faster, which improves Core Web Vitals such as First Contentful Paint and helps your SEO. Strings and calc() expressions are preserved safely. Keep your original, readable file for editing and use the minified version in production.

A minification example and how much you save

This readable rule:

/* Card */
.card {
  margin: 0px;
  color: #ffffff;
  background: #000000;
}

becomes one short line:

.card{margin:0;color:#fff;background:#000}

The comment and spaces are removed, 0px becomes 0, six-digit colors are shortened and the last semicolon is dropped. The result works exactly the same.

How much smaller will it be?

Hand-written stylesheets with comments and generous indentation often shrink by 20–30%. Files that are already compact shrink less. The real benefit is on mobile connections, where every request and every kilobyte delays the first paint of the page.

A safe workflow

• Edit style.css (readable) and publish style.min.css (minified).
• Minify again every time you change the original, so the two never get out of sync.
• If something breaks after minifying, look for a missing closing brace in the original. The minifier cannot guess what an unfinished rule was meant to be.

How to use the CSS Minifier

1. Paste your CSS into the input box.
2. Click Minify CSS.
3. Check how many bytes were saved.
4. Copy the minified CSS into your production stylesheet.

Frequently asked questions