Format minified or messy CSS with one declaration per line and consistent indentation, including nested rules like media queries.
Google AdSense Banner
This area will contain advertisements after approval.
Google AdSense Banner
This area will contain advertisements after approval.
This tool tracks brace ({, }) and semicolon (;) boundaries to reformat CSS with one selector and one declaration per line, indenting nested rules like @media queries an extra level, a straightforward state-machine approach rather than a full CSS parser.
This tool does the opposite of our CSS Minifier, adding readable formatting back to compressed or single-line CSS, rather than stripping it out. Use whichever direction matches what you're trying to do with the stylesheet.
Beautifying the minified '.box{color:red;padding:10px}' expands it to four lines: '.box {' opens the rule, 'color: red;' and 'padding: 10px;' each get their own indented line with a space added after the colon, and '}' closes the rule back at the left margin, restoring the readable, one-declaration-per-line format.
Expecting this to validate the CSS, it's a formatter based on tracking braces and semicolons, not a full parser, so invalid CSS gets reformatted according to the same brace/semicolon rules rather than flagged as an error.
Assuming beautifying changes what the CSS does, only indentation and line breaks are added, selectors, properties and values are left exactly as written.
Pasting CSS with unbalanced braces (like a missing closing }) and expecting a clear error message, since this is a state-machine formatter rather than a validator, unbalanced braces can produce oddly indented output rather than a descriptive error.
Yes, nested rules like @media blocks are indented an additional level, matching how CSS nesting is typically formatted.
No, all formatting happens entirely in your browser, your code is never transmitted anywhere.
Google AdSense Banner
This area will contain advertisements after approval.