Code Minifier (HTML/CSS/JS)
Minify HTML, CSS, and JavaScript instantly in your browser. Shrink file sizes up to 60–80% with no upload required.
Paste your CSS code below and click Minify.
Your minified code will appear here.
What Is Code Minification and Why Does It Matter?
Minification is the process of removing everything from source code that does not affect runtime behaviour: whitespace, indentation, comments, and (for JavaScript) unnecessarily long variable names. The output file does exactly the same thing as the original but in fewer bytes. For a typical web page, minification alone can cut CSS and JavaScript payloads by 30–70%, which translates directly into faster load times, lower bandwidth costs, and better Core Web Vitals scores.
Google, Mozilla, and every major CDN recommend serving minified assets. Lighthouse — the performance auditing tool built into Chrome DevTools — flags un-minified JavaScript and CSS as a medium-severity issue and estimates the exact byte savings you are leaving on the table. This tool gives you those savings with a single click, without touching your local build pipeline.
How to Use the Code Minifier
- Select the language tab: CSS, JavaScript, or HTML.
- Paste your code into the input area — or click Try an example to load a realistic snippet and see the tool in action immediately.
- Click Minify. The minified output appears below with an exact byte count and percentage saved.
- Click Copy minified to copy the result to your clipboard, then paste it straight into your project or CDN upload.
What Each Minifier Does
Under the hood, three industry-standard libraries handle the work. terser is the same engine used by Vite and webpack for JavaScript minification — it performs dead-code elimination, constant folding, and optional mangling to shorten identifiers. csso restructures CSS at the syntax level, merging duplicate selectors and shortening values where possible, not just stripping whitespace. html-minifier-terser handles HTML, collapsing whitespace between tags, removing optional closing tags, and even invoking the CSS and JS minifiers on inline styles and scripts.
Common Use Cases
A quick minification pass is useful in many situations that fall outside a typical build workflow:
- Checking how much a hand-written stylesheet or vendor override file can shrink before committing it.
- Preparing a CSS or JS snippet to embed inside an email template or a CMS rich-text field that does not run a build step.
- Minifying a single config-driven HTML fragment (e.g. an ad tag or tracking pixel) delivered as a string.
- Estimating the compressed size of a script before choosing whether to inline it or serve it as an external request.
- Teaching or demonstrating what a minifier does to students or teammates unfamiliar with the concept.
Privacy and Safety
Every minification operation runs locally inside your browser. The code you paste is processed by JavaScript engines — terser, csso, and html-minifier-terser — running entirely on your device. Nothing is uploaded to any server, logged, or stored between sessions. You can safely minify proprietary source code, internal configuration scripts, and any other sensitive material without worrying about it leaving your machine.
Frequently Asked Questions
What does a code minifier actually do?↓
A minifier strips out everything that is not executed: whitespace, newlines, indentation, and comments. For JavaScript it can also shorten variable names (mangling) and fold constant expressions. The resulting code is functionally identical to the original — the browser or JavaScript engine runs it exactly the same way — but the file is smaller, so it downloads faster and parses in less time.
Is minified code reversible? Can I un-minify it?↓
Whitespace compression is reversible using a code formatter or prettifier. However, if mangle (variable renaming) was applied to JavaScript, the original variable names cannot be recovered from the minified file alone — they are only preserved in a source map, which is a separate file that maps minified positions back to the original code. For CSS and HTML, minification is always fully reversible by reformatting.
When should I minify HTML vs CSS vs JS?↓
You should minify all three for any production website. CSS and JS are typically the biggest wins per file because they contain the most whitespace and comments. HTML benefits less but every byte counts for large templated pages. Most modern build tools (webpack, Vite, Parcel) minify these automatically during a production build — this online tool is ideal for quickly checking individual snippets, debugging a specific file, or working outside a build system.
Why does the output sometimes look different from what I expected?↓
CSS minification may reorder properties within a shorthand rule or merge declarations where safe to do so. JavaScript minification may fold constants, remove unreachable branches, or rename local variables. These are all semantics-preserving transformations — the behaviour of the code does not change. If you see unexpected output, check whether your code relies on a side effect that the minifier is safely eliminating.
Does this tool send my code to a server?↓
No. Everything runs entirely inside your browser using WebAssembly and JavaScript — terser for JS, csso for CSS, and html-minifier-terser for HTML. Your code never leaves your device. This makes it safe to use with proprietary source code, internal scripts, or any code you cannot share externally.