How it works
Reindents and tidies compressed or misaligned CSS or SCSS stylesheets to make them readable. Useful for inspecting minified styles, reviewing third-party CSS, or unifying the format before saving it.
It lets you choose the indentation type (spaces or tabs), the indent size, and the line ending. Each declaration goes on its own line and comma-separated selectors are placed on separate lines.
Processing is entirely local, in your browser, with js-beautify. It formats the presentation; it does not minify, reorder properties, or validate that the rules are correct.
Examples
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Selectors are split onto lines and each property is indented.Use cases
- Make a minified .css file from a site readable.
- Normalize the indentation of a stylesheet before a commit.
- Review and compare CSS rules from a framework or library.
- Tidy up SCSS pasted from documentation or generators.
Frequently asked questions
Does it also work for SCSS or LESS?
It formats CSS and compatible syntax such as SCSS, including nested rules. It does not compile SCSS or LESS to CSS: it only rearranges the indentation and line breaks.
Does it reorder or group the properties?
No. It keeps the original order of selectors and declarations. It only changes spacing, indentation, and line breaks to improve readability.
Is it the same as minifying CSS?
No, it is the opposite. Formatting adds spaces and line breaks to read it better; minifying removes them to reduce the file size. To compress, use the minification tool.
Is my code uploaded to a server?
No. Formatting happens entirely in your browser; the CSS never leaves your computer.