CSS Minifier and Beautifier, Free and Private

About the CSS Minifier

The CSS Minifier makes a stylesheet smaller by removing comments, whitespace and the last semicolon in each block, and the same page can also beautify CSS that is squeezed onto one line. Paste CSS into CSS and the result appears next to it as you type. In Minify mode a note gives the bytes before and after and the percentage saved. In Beautify mode each declaration goes on its own line with the indent you choose.

Your CSS never leaves your device. The code runs in the page, so nothing is uploaded, logged or stored, and it is gone when you close the tab. The minifying code is only downloaded the first time you type, so the page stays light until you use it.

How to use it

What minifying does

Comments are removed, and the whitespace around selectors, braces, colons and commas is dropped, while the spaces that mean something stay, such as the descendant space in e f or the space inside calc(100% - 2px). The last declaration of each block loses its semicolon, so a{color:red;margin:0;} becomes a{color:red;margin:0}. Windows line breaks and tabs disappear.

The two shortening options

• Shorten zero lengths turns 0px, 0em, 0.0rem and -0px into 0. It applies only to length units. 0%, 0s, 0deg and 0fr are left as written, because 0 alone would change their meaning. Zeros inside calc(), min(), max(), clamp(), var() and env() are kept, and so is the 0px in a flex shorthand such as flex: 1 1 0px, where a bare 0 is treated differently by browsers.
• Shorten hex colors turns #ffffff into #fff and #aabbcc into #abc, but only when every pair of digits repeats, so #abcdef stays as it is. Things that only look like colors, such as an id selector #aabbcc, an attribute value, a string or a url(), are never touched.

What is copied exactly

Strings and url(...) are copied exactly, including any 0px, #ffffff, /* x */, ; or } inside them. Custom property values, such as --gap: 0px 0px, are copied exactly apart from trimming at both ends, because their meaning depends on the code that reads them. Escapes in selectors, such as .\31 23, keep their trailing space.

Worked example

Input a {\n color: red;\n}\n is 20 bytes. Minified it is a{color:red}, 12 bytes. The percentage saved is

$\text{saved} = \frac{20 - 12}{20} \times 100 = 40\%$

and the note reads Saved 8 bytes (40.0%): 20 bytes to 12 bytes. Minifying the result again changes nothing.

Beautify

Beautify puts each declaration on its own line ending in ;, puts each selector of a list on its own line, indents the rules inside @media and similar blocks, and separates rules with a blank line. Comments stay, each on its own line. Beautifying does not shorten anything: 0px and #ffffff stay as written. Minifying the beautified text gives the same result as minifying the original.

Errors name the line and column

If the CSS cannot be read, you get an error with the line and column and the offending line with a caret under it. The cases are an unclosed block, an unclosed string or comment, an unclosed url(, and a } that has no {. Related tools: the HTML Minifier and the HTML Formatter.

Frequently asked questions