Everything runs in your browser: the code you paste or open is not uploaded anywhere.
Embed this tool on your site
Free and without an account: copy the code and paste it into your website, blog or docs.
About the CSS & JS Minifier
Make a stylesheet or script smaller before you publish it, or make a minified file readable again. Paste code or drop a file, choose Minify or Beautify, and the result appears as you type with the bytes saved. JavaScript goes through Terser, the minifier most build tools use; CSS is minified without rewriting a single value. Nothing is uploaded: it all runs in your browser.
How to use the CSS & JS Minifier
-
Paste or open your code
Paste CSS or JavaScript into Input, or drop a .css, .js or .mjs file. The language is picked from the file or from what you paste; switch between CSS and JavaScript if the guess is wrong.
-
Choose Minify or Beautify
Minify removes comments and spaces; for JavaScript, "Shorten variable names" and "ES module" decide how far Terser goes, and "Keep license comments" keeps /*! and @license notes. Beautify reformats the code with 2 spaces, 4 spaces or tabs.
-
Check and copy
Look at the original size, the result and the percentage saved. If there is a syntax error, fix it at the line and column shown. Then copy the result or download it as .min.css or .min.js.
When to use it
Smaller files without a build step
Minify a stylesheet or script for a site that has no bundler, such as a WordPress theme, a landing page or a snippet you paste into a CMS, so visitors download fewer bytes.
Reading minified code
Beautify a .min.js or .min.css from a library, a CDN or a site you are debugging to see its structure with proper line breaks and indentation.
Measuring the saving
See how many bytes minification removes from a file before deciding whether it is worth adding a minify step to your deployment.
Frequently asked questions
Does minifying change how my CSS works?
No. The CSS minifier only removes comments, whitespace that has no meaning and the last semicolon of each block. It keeps the spaces CSS needs, such as between .a and .b in a descendant selector, around + and - inside calc() and in custom property values, and never touches strings or url(). It does not merge rules or shorten colors either, so it saves less than tools that rewrite values, but the result behaves exactly like the original.
What does "Shorten variable names" do?
It is the mangle step of Terser: local variables and function parameters get one- or two-letter names. Global names are left alone unless ES module is on, because other scripts on the page may use them. Turn it off if you want readable names in the minified file; compression still runs.
When should I turn on ES module?
When the code uses import or export, or await outside a function. In a module, top-level names are private, so Terser can also shorten them and drop the ones that are never used. If the code only parses as a module, the tool says so and offers to turn the option on.
Can beautifying give me back the original code?
It gives back the layout, not the names or the comments. Beautify adds line breaks and indentation, but variables a minifier shortened keep their short names and removed comments do not come back. Only a source map links minified code to its original source.
Is my code uploaded?
No. Minifying and beautifying run in your browser; Terser and the formatter are loaded into the page the first time you use them. The code is autosaved in your browser's local storage (up to about 200,000 characters) so it is still there when you come back; Clear removes it.
Related tools
Browse all free online tools on Tooly — every one runs in your browser, with no account required.