CSS Formatter
Format and beautify CSS with consistent indentation.
About this tool
Format and beautify CSS: compressed or messy rules become indented, one declaration per line, with consistent spacing so reviews and diffs are readable. Only whitespace changes — selectors, values, and the cascade stay exactly as written.
How to use
Paste minified or one-line CSS, run Format, then copy the result into your editor. Pair with the minifier when you need the opposite direction.
Example
Example starts as a minified card snippet — Format restores indentation.
Input
.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}Output
.card {
display: flex;
padding: 1.5rem;
border-radius: .5rem;
background: #fff;
}
.card h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 .5rem;
}Tip
Format before code review; minify only for production bundles.
Good to know
Is a CSS beautifier different from a CSS formatter?
No. Both mean the same operation — re-indenting rules and putting one declaration per line — so this single page covers both.
Will formatting change how my CSS behaves?
No. Only whitespace and line breaks change, so the cascade stays identical. Strings and url(data:…) values are protected, so a semicolon inside them never splits a declaration.