CSS Minifier & Beautifier

The CSS Minifier & Beautifier turns your stylesheets into whichever form you need. Paste CSS or drop a .css file, then press Minify to get the smallest version for your website, or Beautify to turn a squashed, one-line file into neatly indented code you can read and edit. The result updates as you type and shows the size before and after, so you can see exactly how many bytes you saved.

Minifying removes comments, line breaks and spaces that browsers don't need, drops the last semicolon in each block, removes empty rules and shortens numbers such as 0.5 to .5. It is careful about the places where spaces matter: text inside quotes and url() is never changed, the spaces around + and - inside calc() are kept, and a space before a colon in a selector (as in div :first-child) stays, because removing it would change which elements match. Comments that start with /*! are kept by default, because that is how libraries mark their licence.

Beautifying puts each selector and each declaration on its own line, adds a space after colons and commas, and indents @media, @supports, @keyframes and nested rules with 2 spaces, 4 spaces or tabs. Choose the One rule per line layout instead to keep each selector and its declarations on a single line, which makes long stylesheets easy to scan. You can copy the result or download it as a .min.css or .css file. Everything runs in your browser, so private or unreleased code never leaves your device.