Minify or beautify CSS online — free, fast, private.
What is a CSS minifier?
A CSS minifier shrinks your stylesheets by removing everything the browser does not need:
comments, extra whitespace, line breaks, and redundant semicolons. The result is a smaller file
that downloads faster, while behaving exactly like the original. This tool also works in reverse:
the beautifier re-indents minified or messy CSS with consistent 2-space indentation so it is easy
to read and edit. All processing happens locally in your browser — your CSS is never uploaded.
How to use this tool
- Paste your CSS into the input box above.
- Click Minify to compress it, or Beautify to format it with clean indentation.
- Check the stats line to see the original size, the result size, and the percentage saved.
- Click Copy output to copy the result to your clipboard.
Minify vs gzip: they complement each other
Minification and gzip (or Brotli) compression are not rivals — they work best together.
Minification removes bytes that gzip cannot, such as comments and unnecessary punctuation,
and it does so permanently, for every client, even when compression is unavailable.
gzip then compresses the already-minified text on the wire. Serve minified CSS with gzip
or Brotli enabled and you get the smallest possible transfer size.
Worked example: what Minify actually removes
Paste this one-line, 50-byte stylesheet and click Minify:
/* header */ .nav { color: #333; margin: 0 auto; }
The result is .nav{color:#333;margin:0 auto} — 30 bytes, and the stats line reports 40% saved. The comment, the last semicolon, and the spaces around {, : and ; are gone, but the space in 0 auto survives: whitespace between two values is significant, so the minifier collapses it to a single space rather than deleting it.
Common mistakes to avoid
- Dropping the space before ( in media queries.
@media screen and(min-width:600px) is invalid: "and(" parses as a function call and the whole query is ignored. The space in and ( is mandatory, and this minifier keeps it.
- Appending to a minified rule by hand. The final semicolon before
} is removed because CSS does not require it. If you later add a declaration inside that rule, re-add the semicolon first, or the new declaration fuses with the previous one and both get dropped.
- Expecting value rewrites.
0px stays 0px and #ffffff is not shortened to #fff. This tool removes characters but never rewrites values, so the output always means exactly what the input meant.
Frequently asked questions
What is CSS minification?
CSS minification is the process of removing all characters that are not required for the browser to parse a stylesheet: block comments, extra whitespace, line breaks, and the final semicolon of each rule. The minified file is smaller and downloads faster, but is parsed identically to the original.
How much file size does minifying CSS save?
It depends on how heavily the source is commented and formatted, but savings of 10–30% are typical, and heavily commented stylesheets can shrink by 50% or more. This tool shows the exact byte counts and percentage saved for your CSS every time you minify.
Does minifying CSS change how my site looks or behaves?
No. This tool only performs safe transforms: it strips comments and insignificant whitespace while leaving property values, quoted strings, and the required spaces inside calc(), min(), max() and clamp() untouched. Your styles render exactly the same — the file is just smaller.
Does this tool generate source maps?
No. It produces a single minified file with no source map. If you need source maps for debugging production CSS, generate them in your build pipeline (for example with PostCSS, esbuild, or Sass) and keep your original, unminified files as the source of truth.