CSS Formatter & Beautifier
Beautify minified CSS with custom indentation, one declaration per line, strings intact
About CSS Formatter & Beautifier
In a data URI like url(data:image/svg+xml;base64,...) the semicolon is part of the address, not a declaration separator. Formatters that simply split on {, } and ; cut the stylesheet in half right there, and the same happens to content: "a { b". This tool tokenises the CSS instead of slicing the text, so strings, comments and url() contents survive untouched.
How to use CSS Formatter & Beautifier
- 1
Paste your minified CSS into the input box; the output is rebuilt as you type.
- 2
Set the indent to 2 spaces, 4 spaces or a tab.
- 3
Choose whether the opening brace sits on the same line or the next line.
- 4
Toggle one selector per line, blank line between rules, and keep comments.
- 5
Check the rule and declaration counters, then hit Copy.
Frequently asked questions
Is my CSS uploaded anywhere?
No. All parsing and re-emitting happens in JavaScript inside your own browser tab, and the tool makes no network requests at all. Leave the Network panel of your devtools open while you format and you will see zero requests logged.
Can beautifying change how my page renders?
The common belief that whitespace in CSS is always meaningless is wrong. Whitespace is significant in selectors: .a .b is a descendant match while .a.b requires both classes on one element, and inside calc() the spaces around + and - are mandatory or the value is invalid. This formatter preserves those meaningful gaps from the source and only normalises spacing around commas, colons and the >, + and ~ combinators.
What happens when I turn off Keep comments?
That is the one setting where output is not byte-equivalent to the source. A removed comment is replaced with a single space so the tokens on either side cannot fuse, which means .a/*x*/.b becomes .a .b — semantically different from .a.b. If your sheet has comments inside a selector or a value, leave the option on.
Does it handle nested CSS and modern at-rules?
Yes. The parser is generic and follows any block opened with {, so native CSS nesting with & is indented correctly, along with @media, @supports, @container, @layer, @keyframes, @font-face and @page. If a brace, string or comment is left unclosed, the tool repairs the output and shows a warning instead of silently producing garbage.