CSS Minifier & Beautifier
Minify CSS to ship smaller stylesheets or beautify for reading.
Written by Anil Gautam · Updated
What does the CSS minifier remove?
Minify runs four steps. It deletes every /* comment */, collapses runs of spaces, tabs and line breaks into a single space, removes the spaces around braces, colons, semicolons, commas and the >, + and ~ combinators, and drops the semicolon before each closing brace. Quoted strings are set aside first and put back unchanged. The sample stylesheet on the page shrinks from 123 bytes to 95, about 23 percent smaller, and the label above the output shows both sizes. Sizes are counted in UTF-8 bytes, so a non-English character in a content string counts as more than one.
Values stay as written. 0.9 is not shortened to .9, white is not swapped for #fff, and duplicate rules remain, so a build-time minifier will usually save more. Servers that compress files with gzip or Brotli already shrink repeated whitespace well, so the saving on the wire is smaller than the byte count here suggests. License banners are comments too and get removed, so paste one back at the top if its terms require it. Processing happens in your browser, and the stylesheet is not uploaded.
Can minifying break my CSS?
Math functions keep their spaces. Inside calc(), clamp(), min() and max(), a plus sign must have a space on each side, and the minifier leaves those spaces in place, so width: calc(100% + 20px) becomes width:calc(100% + 20px) and stays valid. Minus signs keep their spaces as well. A + inside :nth-child(2n + 1) also keeps its spaces, which is valid and costs a byte or two.
Quoted text is left as you wrote it, so content: " : " keeps its spaces inside the quotes and a data URL keeps its semicolons. Spaces between selectors are a different matter: a selector written as a :hover, meaning any hovered element inside a link, becomes a:hover, which matches only a hovered link.
What does Beautify output look like?
Beautify minifies first and then adds line breaks, so it deletes comments as well. Each selector ends with an opening brace, every declaration gets its own line with a two-space indent, and there is no space after the colon. Because the last semicolon in each rule was dropped during minifying, the closing brace stays on the line of the final declaration, as in border-radius:8px}. Rules inside @media are not indented a second level.
That layout is good enough for reading a minified stylesheet copied from a live site. Keep your original source for editing, since its comments cannot be recovered from either output. For other file types, use the HTML Minifier & Beautifier or the JavaScript Minifier & Beautifier.