CSS Beautifier
Expand compressed CSS rules onto separate, indented lines.
Quick answer: enter your details below and click Beautify CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Paste your CSS into the box.
- Click Beautify CSS.
- Read the expanded rules.
About this tool
This tool breaks each rule onto its own lines, puts every declaration on its own line, and indents declarations by two spaces inside their rule. It also adds a space after the colon in declarations, so margin:0 reads as margin: 0. It handles nested blocks such as media queries by tracking brace depth. It does not sort properties, merge duplicate rules or validate selectors, so it is a readability aid rather than a CSS linter.
Frequently asked questions
Does it sort or merge my rules?
No. Rules stay in the order you gave them, and duplicates are not merged.
Does it handle media queries?
Yes, for ordinary nesting: brace depth is tracked, so rules inside a media block are indented one level deeper.