BrowserTools

CSS Minifier

Strip whitespace & shorten CSS

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-09-21
Free Private No uploads
What is CSS Minifier?

Two modes behind one button. Minify removes block comments, collapses every run of whitespace to a single space, drops the spaces around the punctuation that needs none, deletes the final semicolon before each closing brace and trims both ends. It is a text transformation rather than a parser, which is fast and predictable but also its limitation: selectors, values, at-rules and media queries pass through untouched, while anything inside quotes or url() is not treated as special. Beautify runs the other way, inserting a brace and a two-space indent, placing each declaration on its own line and separating blocks with a blank line. A three-tile report gives the encoded byte count before and after plus the percentage saved, measured with TextEncoder rather than a character count.

Minify stylesheets by removing comments, whitespace and last semicolons, with a before/after size report. Safe, local and instant — no build pipeline required.

Private CSS Minifier In Your Browser

CSS Minifier is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use CSS Minifier

1

Paste CSS into the input area, or leave the sample button stylesheet that is already loaded.

2

Choose Minify to compress or Beautify to reformat, then press Minify CSS or Beautify CSS to run the conversion.

3

Read the result panel, which prints the output and, when minifying, adds Before, After and Saved tiles.

4

Press the copy button in the result panel's header to take the transformed text, or edit the input and run it again.

Key Capabilities
  • Minification strips comments, collapses whitespace, removes spaces around the brace, colon, semicolon, comma and combinator characters, and drops each block's last semicolon.
  • The size report is measured in encoded bytes rather than characters, so multi-byte content is counted correctly.
  • Beautify lives in the same panel and converts a compressed file back into indented, one-declaration-per-line form.
  • Nothing is renamed, reordered or merged, so a rule that worked before still works after the transformation.
Common Use Cases
  • A developer compressing a one-off inline stylesheet before pasting it into a template, without standing up a build.
  • Someone handed a compressed production stylesheet uses Beautify to make it readable enough to locate the rule they need.
  • A student comparing a readable block with its compressed form to see precisely which characters were removed and why.
Clear Answers

Frequently Asked Questions

Is it safe for every stylesheet?
For ordinary CSS, yes, because the transformation only removes characters that carry no meaning between tokens. The exception is quoted content: working on raw text rather than a parsed tree means a string or a data URL containing a space beside a brace or a colon can come out altered. Check any file that embeds long content strings.
Does it combine or reorder any rules?
No. There is no restructuring step here — no selector merging, no property reordering, no shorthand rewriting. What you gain in size you lose in readability, which is the intended trade for a file being served rather than edited.
How much smaller does a file get?
Hand-written CSS usually loses 25 to 40 percent, nearly all of it indentation and line breaks. A file that has already been through a production minifier has little left to remove, and the Saved tile will show a correspondingly small number.
Can it handle SCSS or Less?
No. Those are preprocessor languages with variables, nesting and mixins, and none of that is resolved here. Compile them to plain CSS first, then compress the output — the nesting syntax will otherwise be mangled.