All tools

HTML & CSS Minifier

Minify or beautify HTML and CSS safely

Shrink HTML and CSS by removing comments and whitespace without touching strings, pre blocks or scripts, or beautify them again, with before and after sizes including gzip.

How to use HTML & CSS Minifier

  1. Choose HTML or CSS, then paste your code into Input, drop a file on it, or use Open file or Try an example.
  2. Pick Minify to shrink it or Beautify to re-indent it (2 spaces, 4 spaces or a tab). For HTML you can also tick Remove attribute quotes where safe, which is off by default.
  3. Read the Size card for bytes and an estimated gzip size, before and after, then copy the result or download it.

How it works

Both minifiers are small scanners that treat anything risky as opaque. In CSS, strings, url(...) and comments are recognised first, so text like "/* not a comment */" is never touched. Comments are removed (except those starting with /*!), whitespace is collapsed, and spaces are removed only next to { } ; , > ~ and after :. Inside parentheses, such as calc(1px + 2px), spaces around operators are kept. The last ; before } is dropped.

In HTML, comments are removed except conditional comments (<!--[if IE]>). The content of <pre>, <textarea>, <script> and <style> is copied exactly. Elsewhere, runs of whitespace become one space, and whitespace is removed next to block-level tags (such as div, p, li, td) so <b>a</b> <i>b</i> keeps its space. Attribute values are never changed. The gzip size comes from your browser’s CompressionStream. Everything runs on the page.

Limits

  • Input over 5,000,000 characters is not processed.
  • The minifiers are conservative on purpose: no shortening of colours, units or selectors, no merging of rules, no removal of empty rules, and no minifying of JavaScript or of CSS inside <style> or style="" attributes.
  • Optional end tags are not added or removed, and HTML is not validated: broken markup is passed through as is. Beautifying HTML with omitted end tags (like <li> without </li>) may indent unusually.
  • Beautify keeps <pre>, <textarea> and <script> content exactly as written, so scripts are not re-indented; CSS inside <style> is formatted.
  • The gzip figure is an estimate (this browser’s compressor at its default level) and shows n/a if the browser has no CompressionStream.

Privacy

Your code is processed in your browser and is never uploaded or stored. Copy share link puts the input and options in the link’s # fragment, which browsers don’t send to servers; large inputs show Too large to share.

Frequently asked questions

Will minifying break my page?

It is designed not to: strings, urls, <pre> blocks, scripts and attribute values are left alone, and whitespace that matters between inline elements is kept as a single space. Test the result before deploying, as with any minifier.

Why is the saving smaller than other minifiers?

Other tools also rewrite colours and numbers, merge rules or remove optional tags and quotes. This one only removes comments and whitespace (and optional quotes if you ask), which is the safest part. After gzip the difference is usually small.

Are my license comments kept?

In CSS, comments starting with /*! are kept. In HTML, only conditional comments are kept; all other comments are removed.

What does “Remove attribute quotes where safe” do?

It turns class="box" into class=box when the value has no spaces, quotes or =, <, >, backticks and does not end with /. It is valid HTML5 but off by default because some tools and templates expect quotes.

Does Beautify restore my original formatting?

No. Minifying removes the original layout, so Beautify produces a fresh, consistent layout rather than the original one.

More tools