About CSS Formatter
Formatting CSS looks like a job for a regular expression, and that is why so many online minifiers quietly break stylesheets. The characters that give CSS its structure — braces, semicolons, comment markers — are only structural at the top level. Inside a string or a url() they are ordinary text.
Two constructs get destroyed by the naive approach. A background image written as an inline data URI contains semicolons: url(data:image/svg+xml;base64,…). Split on those and the declaration is truncated. A content property can legitimately contain braces: content: "a; b { c }". Split on those and the block structure collapses. Both produce output that looks plausible and is broken.
This tokenises the stylesheet instead, tracking whether it is inside a string, a comment or a url() before treating any character as structure. The tests cover both cases directly, because they are the ones that matter.
How to format CSS
Paste your CSS
Any size. It is parsed in your browser and never uploaded.
Choose format or minify
Formatting sets consistent indentation; minifying strips everything not needed to render.
Copy or download
The statistics show how much minifying would save before you commit to it.
What minifying actually removes
- Comments, entirely. Keep a licence header in a separate file if you need one.
- Whitespace between tokens, and the final semicolon in each block, which is optional.
- Units on zero lengths — 0px becomes 0. Time units are left alone, because 0s is not always interchangeable with 0.
- Six-digit hex colours become three digits when the pairs repeat, so #ffffff becomes #fff but #4a49d8 is untouched.
- Percentages in keyframe selectors are never touched, because 0% there is a selector rather than a value.