What this minifier does
Three modes — pick the language of your source. Each strips the obvious waste:
- HTML — removes comments (except IE conditionals), collapses inter-tag whitespace, normalizes interior whitespace to single spaces.
- CSS — removes comments, collapses whitespace, removes whitespace around
{ } : ; ,, strips redundant semicolons. - JavaScript — removes block and line comments (quote-aware), collapses whitespace around operators and delimiters. Does not rename variables or do tree-shaking — this is a whitespace minifier, not a bundler.
How to minify CSS
Minifying CSS with this tool takes three steps:
- Paste your CSS into the editor and select the CSS language tab.
- Click Minify. The tool removes whitespace, newlines, comments, redundant semicolons, and applies color shorthand (e.g.
#ffffffbecomes#fff). - Copy the output. The size reduction is shown in bytes so you can confirm it was worth the pass.
For typical stylesheets, removing whitespace and comments alone cuts 20–40% of the raw file size. When you also apply color shorthand and strip unnecessary quotes around font names without spaces, you push the savings a little further — every byte counts on mobile connections.
CSS minification: what gets removed
A CSS minifier does not change what your styles do — it only removes characters the browser ignores at parse time. Here is what goes:
| What gets removed | Example | Typical savings |
|---|---|---|
| Whitespace and newlines |
color: → color: | ~30–40% of file |
| Comments | /* heading styles */ → removed | varies |
| Last semicolons in a block | color: red; → color: red | minor |
| Zero units | margin: 0px → margin: 0 | minor |
| Color shorthand | #ffffff → #fff | minor |
| Redundant quotes | font-family: "Arial" → font-family: Arial | minor |
The big wins are whitespace and comments. Everything else is incremental, but they add up across a large stylesheet.
CSS beautifier — un-minify CSS
A CSS beautifier does the opposite of a minifier: it takes a dense, unreadable block of CSS and re-formats it with proper indentation, line breaks after each rule, and spaces around braces. This is the tool for two common situations:
- Reading third-party CSS. Production CSS from libraries like Bootstrap or Tailwind is shipped minified. Paste it in, click Beautify, and you get indented, readable CSS you can inspect or learn from.
- Debugging your own minified output. If something looks wrong after a build step, paste the minified CSS here to unminify it and find the problem selector.
The beautifier (also called an unminify CSS tool) re-inserts newlines and indentation so each property sits on its own line. It does not restore original comments — those are discarded during minification and cannot be recovered. Use this tool when you need to unminify CSS quickly without installing anything.
Minification vs gzip compression
Minification and gzip (or Brotli) are not the same thing and they work at different levels:
- Minification permanently removes characters from the source file. The smaller file is what you deploy.
- Gzip/Brotli compress the file on transfer and decompress it in the browser. The file on disk stays the same size — only the bytes over the wire are reduced.
The two techniques stack well. Minify first, then serve with gzip. The combined saving is greater than either technique alone because gzip compresses repetitive patterns and a minified file, while smaller, still has plenty of repetition gzip can exploit.
If your server already sends gzip, minification adds roughly 10–15% additional reduction on top of what gzip achieves. For CSS files over 10 KB, that is worth doing. For a 2 KB utility stylesheet, the difference is negligible.
JavaScript and HTML minification
This tool handles all three languages, not just CSS:
- JavaScript minification removes whitespace around operators and delimiters, and strips both block (
/* */) and line (//) comments. It is quote-aware so it does not strip content inside strings. It does not rename local variables — this is a safe, whitespace-only pass. For full variable mangling and dead-code elimination, use esbuild, terser, or your bundler. - HTML minification collapses whitespace between tags and removes HTML comments. It preserves IE conditional comments and does not touch the content of
<script> or <style> blocks so inline JS and CSS are not broken.
If you are building a full pipeline, consider pairing this quick check with the CSS Grid Generator to prototype layouts before writing CSS you will later minify.
When this is the right tool
- Quick inline minification for a snippet you're pasting into an email, blog post, or support ticket.
- Shrinking a static HTML page without setting up a build pipeline.
- Inspecting the minified output size before deciding if you need a real minifier.
- Un-minifying third-party CSS or HTML to read it during debugging.
When it's NOT the right tool
- Production JavaScript bundles — use esbuild, terser, swc, or your bundler's built-in minifier. They rename variables, hoist constants, eliminate dead code, and produce dramatically smaller output.
- CSS with sourcemaps — use Lightning CSS, cssnano, or a PostCSS pipeline.
- Complex HTML with embedded scripts/styles — html-minifier-terser does a more thorough job.
Frequently asked questions
Is it safe to minify production CSS?
Yes. Minification only removes whitespace and comments — it does not change selectors, property names, or values. The browser reads minified CSS identically to the original. The one precaution worth taking: always test in a staging environment first. Bugs in hand-authored CSS that were hidden by whitespace occasionally surface after minification, though this is rare with valid CSS.
How much smaller does CSS get after minification?
Typically 20–40% smaller on raw uncompressed size. A stylesheet that is 50 KB before minification will often land around 30–40 KB after. If you then apply gzip on top, the additional gain from minification is 5–15% — still meaningful for large stylesheets served on high-traffic pages. For CSS under 10 KB, the absolute byte savings are small but minification is still a good habit. See also: when to minify HTML, CSS, and JS and how gzip compression works with HTML.
Can I minify CSS with custom properties (variables)?
Yes. CSS custom properties (e.g. --color-primary: #fff;) are preserved correctly. The minifier only strips the whitespace around the declaration — the variable name and value are untouched. The same applies to var() references in property values. CSS variables are standard syntax and the minifier handles them as it handles any other declaration.
Related tools
- JSON Formatter — Format, validate, and beautify JSON online. 100% client-side — your data never leaves your browser.
- Text Diff — Compare two text blocks line-by-line or word-by-word. Unified and split view. Shows added, removed, and changed segments with full color coding.
- Markdown Preview — Live Markdown preview with GitHub-flavored syntax. Tables, task lists, code blocks, strikethrough. Side-by-side editor and rendered output.
- SQL Formatter — Format and beautify SQL queries. 12 dialect options (PostgreSQL, MySQL, SQLite, MSSQL, BigQuery, Snowflake, and more). Keyword casing control.
Related articles
- 5 min readCritical CSS Inlining — Eliminate Render-Blocking CSS for Faster LoadCritical CSS inlining embeds above-the-fold styles directly in HTML to eliminate render-blocking requests. Learn how to extract critical CSS with tools like critical,...
- 4 min readGZIP Compression for HTML — How It Works and How to Enable ItGZIP compression reduces HTML file size by 60-80% before sending to browsers. Learn how GZIP works, how to enable it in Nginx, Apache, Express, and Vercel, and how minification...
- 4 min readHTML Comments Guide — Syntax, Uses, and When Minifiers Remove ThemHTML comments use <!-- --> syntax and are removed by minifiers unless they're conditional comments for IE. Learn comment syntax, legitimate uses, IE conditional comments, and...
- 5 min readHTML Minification Explained — What Gets Removed and WhyHTML minification removes whitespace, comments, and redundant attributes to reduce file size. Here's what minifiers remove, safe vs unsafe optimizations, and how to automate...
- 6 min readHTML Minification — What It Does and How Much It SavesHTML minification removes whitespace, comments, and redundant attributes to reduce file size. Here's what gets removed, how much you save, and when minification actually matters.
- 5 min readHTML Minification and Web Performance — Core Web Vitals ImpactHTML minification reduces page size, but its impact on Core Web Vitals depends on what else you optimize. Here's how minification fits into the critical rendering path, affects...
Further reading
- Minify HTML, CSS, and JS: a practical guide
- Gzip compression and HTML: how they work together
- HTML minification and page performance
Pillar
Part of Data & Format.
Written by Mian Ali Khalid. Last updated 2026-05-12.