Skip to content
koducathome

CSS Minifier

Minify CSS with structural optimisations from CSSO and see how many bytes you saved.

How to use this tool

Steps for using the CSS Minifier.

  1. Paste your stylesheet into the Input CSS panel, or click Sample to try an example.
  2. Leave Restructure on for maximum savings (merging rules and removing overridden declarations), or turn it off for a safer whitespace-and-value-only pass.
  3. Keep or drop the /*! … */ license comment that many libraries require you to retain.
  4. Click Minify and check the size stats under the panels; use Beautify to turn minified CSS back into readable code.
  5. Copy the result or Download it as styles.min.css.

Example

Minify a button component

Input CSS
/*! Buttons v1 | MIT */
.btn {
  padding: 0px 16px 0px 16px;
  color: #ffffff;
  background: #3366ff;
}

/* hover state */
.btn:hover {
  background: #3366ff;
  opacity: 0.90;
}
Minified CSS (license comment kept)
/*! Buttons v1 | MIT */
.btn{padding:0 16px;color:#fff;background:#36f}.btn:hover{background:#36f;opacity:.9}

Common use cases

  • Minifying a hand-written stylesheet for a static site that has no build pipeline.
  • Shrinking critical CSS before inlining it in a <style> tag.
  • Checking how much a stylesheet can be reduced before adding a build step.
  • Making third-party or minified CSS readable again with Beautify.
  • Finding duplicated rules — restructuring merges them, which shows where the source repeats itself.

How CSS minification works

Minification uses CSSO (CSS Optimizer), a structural CSS optimiser. It parses your stylesheet into a syntax tree, then writes it back without comments or unnecessary whitespace and with shorter equivalent values: 0px becomes 0, #ffffff becomes #fff, 0.90 becomes .9, bold becomes 700, and repeated shorthand values such as 0 16px 0 16px are collapsed to 0 16px.

With Restructure enabled, CSSO also optimises across rules: it merges rules with identical declarations into one selector list, merges rules with the same selector, and removes declarations that are overridden later in the same rule set. It only does this when the cascade order makes the change safe, but because it moves declarations around, test the result if your stylesheet relies on unusual ordering or browser hacks. Turn it off to get a purely local, lower-risk minification.

Comments are removed except, when Keep license comment is on, the first /*! … */ comment — the convention libraries use for copyright notices that must survive minification. The size stats compare the UTF-8 byte size of the input and output, which is what browsers download before compression; gzip or Brotli on your server will reduce both further.

CSSO's parser is error-tolerant: instead of failing on invalid CSS it skips what it cannot understand, which can make rules silently disappear. To compensate, the tool scans the input for unbalanced braces, unclosed comments and unclosed strings and warns you with line numbers. If the output looks shorter than expected, check those lines first — or run Beautify on the output to read what was kept.

Limitations

  • Does not process Sass, Less or Stylus — compile them to CSS first.
  • Invalid CSS is skipped rather than reported as an error; the brace/comment/string check catches common causes but not every typo.
  • Restructuring can reorder declarations; verify pages that depend on browser-specific hacks.
  • Unused selectors are not removed (that needs your HTML; use a tool like PurgeCSS in your build).

Frequently asked questions

Is it safe to use the minified CSS in production?

CSSO only applies transformations it considers safe for the cascade, and it is widely used in build tools. Still, check your pages after minifying, especially with Restructure on.

Why did a rule disappear from the output?

Either CSSO merged it into another rule (search for the selector inside a comma-separated list), or the CSS around it could not be parsed. Look at any warnings shown under the panels.

Which comments are kept?

With Keep license comment on, the first comment starting with /*! is kept and all others are removed. Turn it off to remove every comment.

Can I minify JavaScript or HTML too?

Yes — use the JavaScript Minifier for scripts and the Minify button in the HTML Formatter for markup.

Is my CSS uploaded?

No. CSSO runs in your browser and nothing is sent to a server.