Shrink a stylesheet without changing what it selects.
What it's for
Make a stylesheet smaller so a web page loads faster, by removing the spaces, line breaks and comments that only people need — without changing how the page looks.
Before you start
Have the CSS to hand — the code that sets a web page's colours, sizes and layout — copied from a .css file or a style block. It is minified in your browser and nothing is sent anywhere.
Paste the stylesheet
Replace the sample in Stylesheet with your own CSS.
Choose what to shorten
All three boxes are ticked at the start, and that suits most people. Keep /*! licence comments keeps a copyright notice that begins /*!. Shorten hex colours writes #aabbcc as #abc, and Shorten zeros and decimals writes 0px as 0 and 0.5 as .5. Untick one only if something you use needs the longer form.
Minify and copy
Press Minify. The result is in the band at the top of the card — it also changes as you type — and Copy puts it on your clipboard. Keep your original file for editing, and use the minified copy on the live site.
Check what it did
What it did below counts the comments removed and kept, and the size before and after. Notes under it say what was left alone on purpose.
Reading the result
If it goes wrong
There are three places whitespace is significant in CSS, and each is a way a stylesheet gets broken.
A bare space is the descendant combinator. .a .b matches a .b inside an .a; .a.b matches an element with both classes. Removing that space changes which elements the rule hits.
Inside quotes, content: "a b" renders two spaces on the page.
And in calc() the space is required: calc(100% - 20px) is valid and calc(100%-20px) is not, because -20px would read as a signed length rather than a subtraction.
Nothing is merged or reordered. The cascade depends on order.
Because it is a different order of problem. Minifying JavaScript needs a real parser — scope analysis, automatic semicolon insertion, telling a regular expression from a division — and getting it 95% right silently corrupts somebody’s script. CSS has no equivalent traps: the grammar is flat, whitespace is insignificant outside a few well-defined places, and every transformation here is local.
Because a bare space is the descendant combinator, and it means something. “.a .b” matches a .b inside an .a; “.a.b” matches an element carrying both classes. Collapsing that space changes which elements the rule applies to — it is the single most damaging thing a careless CSS minifier does. Spaces around >, + and ~ are removed, because those combinators are explicit.
Because they are required. calc(100% - 20px) is valid and calc(100%-20px) is not — without the space, -20px reads as a signed length rather than a subtraction, and the whole declaration is dropped by the browser. The same applies inside clamp, min and max.
Not if it begins with /*! — that form is the long-standing convention for a comment that must survive minification, and every minifier honours it. It is the one deletion here with legal consequences, so it is kept by default and the page tells you when it kept one. Ordinary /* comments are removed.
No, deliberately. The cascade depends on order — two rules with the same selector are applied in sequence, and later declarations win. A minifier that merges or reorders is rewriting your stylesheet rather than shrinking it, and the extra saving is not worth the class of bug it introduces.
Left exactly as it is, spaces and all. content: "a b" renders two spaces, so squeezing whitespace inside a string changes what appears on the page. Hex colours inside strings are not shortened either, for the same reason.
Minifying JavaScript needs a real parser — scope analysis, automatic semicolon insertion, telling a regex from a division. Getting that 95% right silently corrupts a script. CSS has no equivalent traps.
Important
Runs entirely in your browser; nothing is transmitted. Nothing is reordered or merged — the cascade depends on order. Licence comments beginning with an exclamation mark are kept by default. Nothing you type here is sent to our servers — the calculation runs entirely in your browser.
