CSS Formatter
Runs in your browserOne declaration per line when you’re reading it, one line when you’re shipping it. Working on JavaScript? Switch to the JavaScript Formatter.
Input
Output
Formatting…
How this one works
Beautify puts each selector on its own line, each declaration on its own indented line, and a blank line between rules — including rules nested inside @media queries.
Minify removes comments and every space the browser doesn’t need, and drops the last semicolon in each block. Text inside quoted strings, like a content value, is left exactly as written.
Questions
- Does minifying change how my styles work?
- No. Only comments and optional whitespace are removed. Selectors, property values and strings stay the same, so the browser applies exactly the same styles.
- Does it support SCSS or Less?
- Beautify handles most SCSS and Less syntax, since it works on braces and declarations. Minify is designed for plain CSS; compile SCSS or Less first, then minify the output.
- Is my CSS uploaded?
- No. Formatting runs in your browser tab, and nothing you paste is sent to a server or stored.