RunLocalTools

HTML / CSS Minifier

Paste HTML or CSS and strip out whitespace, comments, and unnecessary characters to shrink file size — with a beautify mode to reverse the process when you need to read minified code someone else shipped.

Why minification still matters even with modern build tools

If you’re working inside a framework with a build pipeline, minification usually happens automatically and this tool is more of a spot-check than a daily necessity. But there are real situations where you need it standalone: a quick static HTML page with no build step, an email template where every kilobyte counts toward spam filter thresholds and client rendering quirks, a CSS snippet you’re pasting into a CMS’s custom code field, or debugging by comparing minified production output against your original source. This tool handles both directions without needing a local Node environment or build tooling installed.

How to use it

  1. Paste your HTML or CSS into the input panel — the tool auto-detects which one you’ve pasted based on the content structure.
  2. Toggle between “minify” (compress for production) and “beautify” (expand minified code back into readable, indented formatting).
  3. For HTML, choose whether to preserve or strip comments — some comments (like conditional IE comments or CMS template markers) need to survive minification, so this is a separate toggle rather than an all-or-nothing setting.
  4. For CSS, choose whether to remove or preserve the last semicolon in a rule block and whether to collapse redundant units (like 0px to 0), since some very old browser targets have quirks around these micro-optimizations.
  5. See a live before/after size comparison showing the percentage reduction, so you know exactly what you gained.
  6. Copy the result directly, or download it as a file if you’re minifying something large enough to be unwieldy to copy-paste.

Common situations this solves

  • Shrinking a static HTML page’s file size before deploying it somewhere without a build pipeline, like a simple landing page or email template.
  • Reading minified CSS or HTML you’ve inherited or pulled from a live site’s source, using beautify mode to make sense of it before editing.
  • Preparing a CSS snippet for a platform’s custom code field (many website builders and CMSs have character limits on custom CSS boxes) where every unnecessary character counts.
  • Comparing your original source against a build tool’s minified output to debug why a class name or selector isn’t matching as expected in production.
  • Cleaning up HTML copied from a word processor or design tool that includes bloated inline styles and redundant markup before using it elsewhere.

Frequently asked questions

Does minifying break my code’s functionality? Proper minification should never change behavior — it removes whitespace, comments, and redundant characters while preserving the exact meaning of the HTML or CSS. If something breaks after minifying, it usually means the original code relied on something fragile, like whitespace-sensitive content inside a <pre> tag, which this tool is designed to detect and leave untouched.

Will this minify JavaScript too? No — this tool focuses specifically on HTML and CSS, since JavaScript minification involves different considerations (variable renaming, dead code elimination) that go beyond simple whitespace removal and are better handled by a dedicated JS-focused tool.

How much size reduction should I actually expect? It varies a lot depending on how the original code was formatted — heavily indented, comment-rich code with generous whitespace can shrink by 20-40%, while code that was already fairly compact might only drop by a few percent. The live size comparison shows you the actual number for your specific input rather than a generic estimate.

Is beautify mode able to reconstruct the original indentation style exactly? Not exactly — minification is a one-way process that discards the original formatting choices (tab vs. space, indent width), so beautify mode reconstructs a readable formatting using sensible defaults, not necessarily identical to whatever the original author used. You can adjust the indent width setting to match your project’s style guide before copying the result.

Can I minify an entire HTML page including embedded <style> and <script> blocks? Embedded <style> blocks are minified along with the surrounding HTML. Embedded <script> content is left untouched, consistent with this tool not handling JavaScript minification — if you need the whole page fully compressed, minify the script content separately with a JS-focused tool first.