CSS Minifier and Beautifier: Shrink or Format Your CSS

How to use it

Paste your style sheet into CSS. Strings and url() are kept exactly as they are.
Keep Mode on Minify to make the CSS smaller, or choose Beautify to make it easy to read.
Compare Bytes before and Bytes after to see how much was saved.
Copy the Result, or download it as styles.css.

What minifying removes and what it keeps

A CSS comment runs from /* to */ and is removed, except a notice that starts with /*! , which the tool keeps for the licence or the credit it carries. The CSS Syntax specification defines the comment, and the tool reads the strings and the url() tokens by the same rules, so their contents are copied as they are.

Spaces go where the grammar does not need them: around braces, commas, colons in declarations, and before an exclamation mark. The last semicolon of a block goes, because a closing brace ends the block anyway. A space before a colon in a selector stays, because a .card :hover selector means something different from .card:hover.

a { color : red ; }  becomes  a{color:red}

Colours, zeros and the shortenings that are not made

A hex colour whose pairs repeat is written with three or four digits: #ffffff becomes #fff and #aabbccdd becomes #abcd. The letters are written in lower case. A colour in a selector is never changed, because a selector such as #aabbcc names an id.

A length of 0px at the top of a value becomes 0. Inside a function such as calc(), and in a custom property that starts with two hyphens, the length is left as it is, because a bare 0 is not read as a length in every context. Beautifying changes no colour and no length.

Sizes are counted in UTF-8 bytes, which is how a server sends the file; a letter with an accent takes two bytes.
Test the page after you minify it, because a rare hack for an old browser can depend on a space that the minifier removes.

Worked example: a rule with a comment, a colour and a zero

The text .card { color: #aabbcc; /* note */ margin: 0px 10px; } has a comment, a hex colour whose pairs repeat and a zero length at the top of a value. Minifying it removes the comment and the spaces, writes #abc for the colour and 0 for the zero.

The result is .card{color:#abc;margin:0 10px}, and the rule works exactly as it did before.

Frequently asked questions

Is minified CSS the same as the original for the browser?

Yes, for the browser the rules apply in the same way, because the tool removes only what the CSS grammar does not need. Still, check the page after you minify it, since a rare hack can depend on a space.

Why does the tool not remove every zero unit?

A zero inside a function such as calc(), and in a custom property, is not always read as a length, so the tool shortens 0px only at the top of a value. That keeps the result safe in every case it handles.

Why does beautifying put comments on their own lines?

Each comment is written on its own line at the level of the rule it belongs to, so the structure of the style sheet stays easy to follow. Notices that start with /*! are kept as well.

Does the tool check my CSS for errors?

No. It reads the structure: it checks that braces, strings and unquoted url() values close. It does not check whether a property name or a value is valid, so use a validator for that.

Is my CSS sent or saved anywhere?

No. The minifying and the beautifying run in your browser. Nothing is stored or sent to our server, so copy the result before you leave the page.

Sources

Figures and text last checked on Tuesday, November 10, 2026.

Result