↑↓ to move ↵ to open Esc to close Browse all tools

CSS and JS Minifier

Paste CSS or JavaScript, or open a file, to make it smaller. You see the size and gzip size before and after.

Pasted code is minified right away. Ctrl + Enter or Cmd + Enter minifies.

JavaScript options (terser)
CSS options (csso)
Size saved
-

Minify some code to see how much smaller it gets.

Original
-
Minified
-
Gzip original
-
Gzip minified
-

Sizes in bytes of UTF-8 text; 1 KB = 1,000 bytes. Gzip at level 6.

Minified code
The minified code appears here.
Try an example

Your code is minified in your browser. Nothing is uploaded.

What minifying does

Minifying makes a CSS or JavaScript file smaller without changing what it does. Spaces, line breaks and comments that only help people read the code are removed, colors and other values get shorter forms, and in JavaScript local variable names become single letters. A smaller file means fewer bytes for every visitor to download. This CSS minifier and JS minifier shows the size before and after, so you see what you gained, and lets you copy the result or download it as a .min.css or .min.js file.

Pick CSS or JavaScript, or leave it on Auto-detect: the tool guesses the language from typical patterns, like selectors with curly braces for CSS or keywords like function and const for JavaScript, and from the file extension when you open a file. If it guesses wrong, choose the language yourself.

CSS: minified with csso

CSS goes through csso 5.0.5 (MIT license). According to its README, it does three kinds of work: cleaning, which removes what is redundant; compression, which replaces values with shorter forms, like #ff0000 with red; and restructuring, which merges declarations and rules. Two rules with the same declarations, such as .a and .b that both set color: red, become one rule .a,.b.

  • Merge rules (restructure) turns that restructuring on or off. Off keeps each rule where it was, and the result is often a little larger.
  • Keep /*! comments leaves comments that start with /*!, such as /*! MIT License */. All other comments are removed.

csso does not stop at a syntax error. It skips what it cannot read, and the tool lists each of those spots with its line, column and the parser's message, because that part may be missing from the result. When the spot is in the condition of an at-rule, such as a newer @container query, csso may keep that condition as plain text. If the rule is in the result with its condition copied unchanged, the tool says so instead of warning about missing parts. In our tests, csso 5.0.5 read CSS nesting, a rule written inside another rule, as such an error and left the nested rules out. If you use nesting, write those rules out in full before you minify, or check the result carefully.

JavaScript: minified with terser

JavaScript goes through terser 5.51.2 (BSD-2-Clause license). Its options, as the terser README describes them:

  • Shorten names (mangle) renames local variables and functions to short names like a or n. Global names stay as they are, so other scripts can still use them.
  • Compress code rewrites code into shorter equivalents, for example by removing code that can never run. The transforms the README marks as unsafe stay off.
  • Keep function names stops terser from removing or renaming function and class names, which matters for code that relies on Function.prototype.name.
  • Keep license comments keeps comments that start with ! and JSDoc-style comments with @license, @preserve or @copyright. Off removes every comment.
  • ES module is for files with import and export. The code is treated as strict mode, and names at the top level may be shortened and unused ones removed. Leave it off for plain scripts, where top-level names are globals.
  • ECMAScript version sets which syntax terser may use in the output. From ES2015 on it writes shorthand properties like {a} instead of {a: a}. It does not convert modern code to ES5: syntax in your input stays as it is.

If terser cannot parse your code, you get its message with the line and column, the line itself with a marker, and a Jump to error button. Minified code should behave like the original, but keep your source files and test the result before you put it live.

Sizes and gzip

Sizes are bytes of the text in UTF-8, with 1 KB = 1,000 bytes. The gzip size is the file compressed with gzip at level 6, the default of fflate (MIT license), computed in your browser, header included. When your server sends files with gzip compression, the gzip numbers are closer to what visitors actually download than the plain sizes. The exact number on your site depends on your server settings.

Minifying happens in a background thread (a Web Worker), so the page stays responsive with large files, and Cancel stops a long run. Files are read in your browser and never uploaded. For other formats, the JSON formatter can minify JSON and the SQL formatter compacts SQL queries.

Good habits with minified files

  • Keep the readable source in your project and publish only the minified copy, named like style.min.css or app.min.js, so nobody edits minified code by hand.
  • This tool does not create source maps, the files that let browser developer tools show the original code of a minified file. csso and terser can both write them, according to their READMEs, so use them in a build step if you need maps.
  • After minifying, load the page and try the parts that use the code before you replace the live file.

How to use the CSS and JS minifier

  1. 1Paste your CSS or JavaScript, drop a .css or .js file on the box, or press Open file.
  2. 2Leave the language on Auto-detect or pick CSS or JavaScript, and set the options.
  3. 3Press Minify. You see the original and minified size, the gzip sizes and the percent saved.
  4. 4Copy the code or download it as a .min.css or .min.js file. If there is an error, press Jump to error.

Frequently asked questions

Is my code uploaded?

No. csso and terser run in your browser, in a background thread, and your code never leaves your device. Copy link only stores the options, never the code.

Will minified JavaScript still work?

It should behave the same: the transforms the terser docs mark as unsafe stay off. Code that reads function names, like error reports that log fn.name, needs Keep function names. Always test the minified file before you deploy it, and keep the original source.

Why is my CSS missing a rule after minifying?

csso skips what it cannot read, and the tool lists each spot with its line and column. In our tests, csso 5.0.5 reads CSS nesting (a rule inside another rule) as an error and leaves the nested rules out, so write nested rules out in full or use a build tool that supports nesting.

What is the gzip size?

The size of the file after gzip compression at level 6, the default of the fflate library, computed in your browser. When a server sends files with gzip compression, this is closer to what visitors download. The exact number depends on your server settings.

What does the ECMAScript version do?

It tells terser which syntax it may use in the output, such as shorthand properties like {a} instead of {a: a} from 2015 on. The terser docs note that it does not convert modern code to ES5: code that uses newer syntax keeps it. ES5 is the safe default.

Which comments are kept?

With Keep license comments on, comments that start with /*! stay in both CSS and JavaScript. In JavaScript, terser also keeps JSDoc-style comments that contain @license, @preserve or @copyright. All other comments are removed.