Tools.us.org

CSS toolsCSS minifier

CSS Minifier

Paste a stylesheet and this CSS minifier compresses it as you type: comments, line breaks and spaces go, and zeros and colours are written in their shortest form. The count under the box shows how many bytes you save, and your code never leaves the page.

272 bytes in, 174 bytes out: 36.0% smaller.

Minified CSS

.card{margin:0 0 24px;padding:16px 20px;border-radius:12px;background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}.card>h2,.card>h3{font-weight:700;color:#333!important}

How to use the CSS minifier

  • Replace the sample with your own CSS: a whole stylesheet or a single rule.

  • Leave "Keep licence comments" on if the file contains a /*! comment that has to stay, such as a font or framework licence.

  • The minified CSS updates as you type, with the size before and after.

  • Copy the result into your .min.css file or straight into a style tag.

What this minifier removes and shortens

  • Comments, except /*! comments when you ask to keep them.
  • Line breaks, indentation and the spaces around braces, colons, semicolons, commas and the > combinator.
  • The last semicolon in each block, and rules that hold no declarations.
  • Leading zeros (0.5 becomes .5) and units on zero lengths (0px becomes 0), except inside calc() and other functions and in the flex shorthand, where a unit can change the meaning.
  • Six-digit hex colours that have a three-digit form (#ffffff becomes #fff).

It does not reorder rules, merge selectors or rewrite shorthands. Those steps save a few more bytes but can change which rule wins, so they belong in a build tool with tests rather than in a paste box.

Why minify CSS

CSS blocks rendering: the browser waits for the stylesheet before it draws the page. A smaller file arrives sooner, especially on a slow mobile connection, and is quicker to parse. The savings are largest on hand-written, well-commented stylesheets, often a quarter to a third of the file, and the readable source stays in your project while the minified copy goes to the server.

Questions

Is my CSS sent anywhere?
No. The minifier runs in your browser with JavaScript on this page. Nothing you paste is uploaded or stored.
Can minifying break my CSS?
This minifier only removes what browsers ignore anyway and keeps strings, url() values and units inside calc() untouched. Test the result in your page all the same, especially with unusual hacks or comments that a tool or framework reads.
Should I minify CSS if my server uses gzip or Brotli?
Yes, the two add up. Compression shrinks repeated text very well, but removing comments and whitespace first still makes the compressed file smaller, and the browser has less to parse.
How do I minify CSS automatically?
In a build pipeline, use a minifier such as cssnano, csso, clean-css or Lightning CSS, which most bundlers include. This page is for quick one-off jobs: a snippet, a theme file or an email template.

More CSS tools