Skip to content

CSS Minify

Remove whitespace to minify CSS.

Input
Output

No result

About CSS Minify

CSS minification removes comments and collapses whitespace, then strips the space around braces, colons, semicolons and combinators, and drops the final semicolon before each closing brace. The result is a stylesheet that is identical in effect and smaller on the wire.

The saving is often larger than people expect for hand-written stylesheets, where comments and indentation can account for a substantial share of the file. Removing them is the cheapest reduction available — it changes nothing about how the browser applies the styles, only how many bytes it has to download.

A practical consideration: this operates on the source text rather than on a parsed representation, so a semicolon inside a quoted string value will be handled as part of that string. It is a text transformation, which is why the output should be checked before it replaces the source of truth in a build pipeline.

What it will not do is worth being explicit about, because several of these are things a fuller minifier handles. It does not rename anything or shorten identifiers; it does not remove unused rules or merge duplicates, so a selector that appears twice stays twice; and it does not rewrite colours, numbers or shorthand in the way an optimiser would. There is no source map, no report of how many bytes were saved, and no option to preserve comments or to select a level of aggressiveness — the single pass is what you get. Custom properties and the newer nested-rules syntax are treated as ordinary text rather than understood, so anything relying on them should be smoke-tested after minification rather than assumed correct.

How to use CSS Minify

  1. 1 Paste the stylesheet.
  2. 2 Comments and whitespace are removed and the output appears immediately.
  3. 3 Copy the minified result for a production build or an inline style block.

Frequently asked questions

How much smaller will the file be?

The reduction depends on how much whitespace and commentary the original contained. Hand-written stylesheets with generous formatting typically shrink substantially, while an already-compact file has much less left to remove.

Are comments removed?

Yes, all of them. That is appropriate for a build artifact but means this is a one-way step — keep the commented source as the version you edit, and treat the minified output as something generated from it.

Does it break the cascade or change specificity?

No. The transformation touches only whitespace and comments, both of which are insignificant to how CSS is applied. Selector order, which does affect the cascade, is left exactly as it was.

Should I keep the minified version as my source file?

No. Minified CSS is hard to edit and any comment you lose is gone. Treat the readable stylesheet as the source and the minified output as a generated artifact, so that regenerating it never costs you information.

Free, online, and private

Free to use

CSS Minify is completely free. There is no account to create, no login, and no hidden charge or usage limit.

Runs online in your browser

It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.

Your data stays private

All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.

How CSS Minify behaves in detail

These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.

Parameter Value
Comments every /* … */ block is deleted outright; the pattern is non-greedy, so the first */ closes it
Whitespace model all whitespace runs become one space, then spaces around { } : ; , > are removed
Output padding the result is trimmed — no leading and no trailing newline is added
Transformation scope whitespace and comments only; no rule merging, colour shortening or unit rewriting
Surviving spaces a space not adjacent to one of the six characters survives, so `.a + .b` keeps its spaces

Compiled from the implementation of this tool and checked against it by itoolnet.

What CSS Minify does not do

Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.

  • Whitespace inside quoted strings is collapsed too, because the whitespace pass runs over the whole document: a{content:"x y"} comes out as a{content:"x y"}, which changes the value rather than the layout.
  • It does not minify in the build-tool sense. Nothing is renamed, no shorthand is generated, no 0px becomes 0 and rules are never merged — the only thing removed is whitespace and comments.
  • Comment stripping happens before anything knows about strings, so a /* sequence appearing inside a quoted value or a url() payload would be read as the start of a comment and deleted along with the text up to the next */.
  • Spaces around the + and ~ combinators are not removed, so the output still contains insignificant whitespace: `.a + .b` and `div p` keep a space while `.a>.b` does not.

Tested and documented by itoolnet, the team that builds and maintains this site.

Share & embed this tool

Writing a guide or article? You are welcome to link to CSS Minify with the snippet below. It is free, runs entirely in your browser, and needs no signup.