TanodTools

CSS minifier and beautifier

Paste a stylesheet to shrink it for production or to lay it out readably, and see how many bytes you save.

Runs entirely in your browser

Mode
Comments

Input up to about 10 MB. It removes whitespace and comments only; it does not merge rules, rewrite values or remove unused CSS.

How to minify or beautify CSS

  1. Paste your CSS into the box, or press Insert a sample.
  2. Choose Minify to compress it, or Beautify to lay it out with your indent. Tick or untick the licence-comment option when minifying.
  3. Check the size saved, then copy the result or download it as a .css file.

Minifying CSS without breaking it

Minifying a stylesheet means removing everything the browser ignores: comments, indentation, line breaks and the spaces around punctuation. Smaller files download and parse faster, and for a large stylesheet the saving is often a quarter to a half of its size before compression. The rules and their order stay exactly as written.

The tricky part is knowing which whitespace the browser ignores. A space between two selectors, as in nav a, is a combinator that means "any descendant", so nav a and nava are different things. Inside calc(1rem + 2px) the spaces around + are required, and calc(1rem+2px) is invalid. Text inside quotes and inside url() is data, not syntax. A minifier built from regular expressions often gets one of these wrong; this one reads the stylesheet as a sequence of tokens and only removes whitespace where the grammar makes it optional.

Beautifying is the opposite direction: one declaration per line, indented inside braces, so a minified file from a CDN becomes something you can read and diff.

Tips

  • Tidying a whole page, not just its stylesheet? Use the HTML formatter.
  • Picking colours for the stylesheet? The Color converter turns hex into RGB, HSL and more.
  • Check what a minify actually changed by comparing both versions in Text diff.

Questions

Is my CSS uploaded?

No. Minifying runs in your browser, and the beautifier library is loaded from this site only if you choose Beautify. Your stylesheet is never sent anywhere.

What exactly does Minify change?

It removes comments and the whitespace around braces, semicolons, commas and combinators (>, ~, +), and drops the last semicolon in each block. It keeps the space in a b (the descendant combinator), in and (min-width: ...) and around + and - inside calc(), clamp(), min() and max(), where removing it would break the value.

Does it touch strings and url()?

No. Anything inside quotes, including text that looks like a comment or a brace, and the contents of url() are copied character for character.

Does it shorten colours or numbers?

No. Values such as #336699, 0.5em and 0px are left as written. Those rewrites save little and carry some risk, so only whitespace and comments go.

How do I know the minified CSS is safe?

After every run the page parses your original and the result with the browser's own CSS parser and compares what it reads. If they differ, a notice appears above the result. A match means the browser sees the same rules.

What are licence comments?

Comments that begin with /*! are conventionally kept by minifiers because they carry copyright or licence text that a licence may require you to retain. Turn the option off to strip them as well.