Paste your stylesheet and get a compact version that behaves the same way. The minifier strips comments and spaces, drops the final semicolon in each block, shortens colours and zero values where that is safe, and tells you how many bytes you saved.
CSS ignores most white space. A browser reads 'a { color : red ; }' and 'a{color:red}' as the same rule, so spaces around braces, colons, semicolons and commas can go. The semicolon is a separator between declarations rather than a terminator, which is why the last one in a block is optional.
A few spaces are not decoration. A space between two selectors means 'inside', so '.menu li' and '.menu.li' are different. Inside calc(), the plus and minus operators must have spaces around them. A good minifier keeps exactly these and removes the rest, and that is the difference between a tool and a find-and-replace.
A length of zero is zero in any unit, so the unit is redundant and 0px can be written 0. The same is not true for times and angles in every context, and not true inside calc() or for the flex shorthand, where a bare 0 can change the meaning. This tool leaves those alone on purpose.
A colour written as six hexadecimal digits can be shortened to three when each pair repeats, so #ffcc00 becomes #fc0. A colour like #ff0001 has no short form and stays as it is. Eight digit colours with an alpha channel shorten the same way when all four pairs repeat.
Minification is one of three common ways to shrink a stylesheet, along with removing unused rules and compressing the response on the server. They stack: a minified file compresses well, and a smaller file also parses a little faster. For a single small site, pasting the result of this tool into a production file is enough.
For a larger project, run a minifier as part of your build so the step cannot be forgotten, and serve the output with a long cache lifetime and a file name that changes when the content does. Then visitors download the stylesheet once and never again until you change it.
It rewrites a stylesheet into the shortest form that means the same thing. Comments, line breaks and spaces around punctuation go, the semicolon after the last declaration in a block goes, and numbers and colours are written in their shorter forms.
A zero length loses its unit (0px becomes 0), a leading zero goes (0.5em becomes .5em), trailing zeros go (1.50px becomes 1.5px), and a six digit colour whose pairs repeat becomes three digits (#ff0000 becomes #f00). Strings, url() contents and custom properties are left exactly as written.
Not when it is done by a proper tokenizer, which is how this tool works. It keeps the spaces that matter, such as the ones around + and - inside calc(), between a media query keyword and its brackets, and after an escape like \31 0. Check your site once after switching to the minified file, as you would after any build step.
It depends on how much white space and commenting you started with. Take 'a { color: #ff0000; margin: 0px; }', which is 34 characters; it becomes 'a{color:#f00;margin:0}', which is 22, a saving of about 35 percent. Real stylesheets usually save less because rules are more varied.
No. The minifier runs as code in your browser, so your stylesheet stays on your device.
Related: CSS formatter, CSS shadow generator, CSS layout generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.