CSS & JS Minifier
Minify CSS and JavaScript to reduce file size
About CSS & JS Minifier
Minifies CSS, JavaScript and HTML with real parsers (Terser for JavaScript, csso for CSS, html-minifier-terser for HTML including its inline style and script blocks) so the output behaves exactly like your original code, and shows the original, minified and gzip sizes.
Paste or upload your CSS, JavaScript or HTML and the minified version is generated automatically. Syntax errors are shown with the line and column.
JavaScript is minified with variable renaming and dead-code removal, so keep your original file — minified code is hard to read. If your code uses top-level names from other scripts, check they still match.
Watch: CSS & JS Minifier in Action
- Does this go as far as a real build-tool minifier like Terser?
- No, deliberately — the JavaScript minification here is conservative, avoiding aggressive changes like variable renaming and dead-code elimination that risk breaking working code. A build-tool minifier will go further, but this one prioritizes never corrupting your code over squeezing out the last few bytes.
- Which languages and file types does it handle?
- CSS, JavaScript and HTML, chosen with the top buttons. Upload accepts .css, .js, .mjs, .html and .htm files, and picks the mode from the name; any other extension is treated as CSS, so switch the mode yourself if needed.
- What does the gzip number mean?
- It is the byte size of the minified output after gzip compression, calculated in your browser, and it approximates what a server sending compressed text would transfer. It does not appear in browsers that lack compression support.
- Does JavaScript minification rename my variables?
- Yes. The JavaScript mode compresses code and shortens local variable and parameter names, and removes dead code and all comments. Keep your original file, because the minified version is hard to read and has no source map.
- Why do I get an error with a line and column?
- The parser could not read the input, for example an unclosed brace in CSS or an unexpected token in JavaScript. Fix the spot named in the red message; no output is produced until the code parses.
- What does HTML mode actually change?
- It collapses whitespace, removes comments, drops redundant attributes and script and style type attributes, shortens the doctype and minifies inline CSS and JavaScript. Attribute quotes and optional tags are left alone, and conditional comments stay.
How to use CSS & JS Minifier
Choose CSS, JavaScript or HTML with the three buttons at the top, then paste code into the Input box or use the Upload link, which accepts .css, .js, .mjs, .html and .htm files and sets the mode from the extension. The Minified box updates about a third of a second after you stop typing. Switching mode swaps in a short sample only if the box still holds a sample or is empty; your own text is kept.
Under the boxes, one line shows the original size, the minified size and the gzip size in bytes, and the Minified label states how much smaller the result is when there is a saving. Copy Output copies the result. Download saves styles.min.css, script.min.js or index.min.html depending on the mode. A syntax problem appears in red, with line and column when the parser supplies them.
When to use it
Use it for a quick production version of a small stylesheet, a bookmarklet-sized script or an email-template HTML snippet when setting up a bundler would be overkill. It also works as a way to see how much of a file is whitespace and comments by comparing the original and gzip byte counts, or to see what a build pipeline would do to a troublesome rule.
When not to use it
Skip it for whole applications. A bundler with source maps, tree shaking and cached builds is the right tool when you ship many files, and the output from here comes with no source map to debug against. Also avoid it for JavaScript that depends on comments surviving, such as license banners that your terms require you to keep.
Tips for best results
Run HTML mode on a page that has inline style and script blocks; the HTML minifier also compresses those embedded blocks, so one paste can shrink all three languages. Keep the unminified original as your source of truth, since the output is not meant for editing. Judge the result by the gzip figure rather than the raw reduction, because servers usually compress text in transit anyway.
Limitations
JavaScript output has all comments removed, including license comments, and local names shortened. CSS is restructured, meaning rules may be merged or reordered; this is intended to keep rendering identical, but check pages that rely on unusual hacks. The gzip figure is skipped when the browser lacks compression support. No source map is created, and one input at a time is processed.
Privacy
Terser, csso and the HTML minifier are loaded as code bundles from this site the first time you use each mode, and then run inside your tab on the text you pasted or uploaded. The file is read locally with the browser's file API and is not uploaded. The only request tied to your use is a usage record with the tool name and a device identifier.
More from Security & Developer: