How to minify CSS
- Paste your stylesheet into CSS.
- The minified CSS appears on the right and the status line shows the size before and after, in bytes.
- Copy it or download it as styles.min.css. Switch Mode to Format to make minified CSS readable again.
What the minifier changes
The minifier is csso, which does more than delete whitespace. With the example CSS:
| Before | After |
|---|---|
color: #ffffff |
color:#fff |
background-color: #3366ff |
background-color:#36f |
padding: 0px 16px |
padding:0 16px |
margin: 0px 0px 0px 0px |
margin:0 |
font-weight: bold |
font-weight:700 |
.btn and .link both set color: #fff |
Merged into .btn,.link{color:#fff} |
It also merges repeated rules for the same selector, keeping the value that would win. Values of custom properties like --brand: #ffffff are left alone.
Minifying and compression
Most servers also compress CSS with gzip or Brotli before sending it. The two work together: minifying removes comments and characters the browser never needed, and compression then shrinks what’s left. For a project with a build step, let your bundler minify on every build. This page is handy for a one-off file, a snippet for a CMS or checking what a minifier does.