CSS Formatter
Beautify messy or minified CSS, SCSS and Less with consistent indentation and spacing. Powered by Prettier and runs in your browser.
Runs in your browser. Nothing is uploaded.
About the CSS Formatter
Stylesheets drift out of shape over time: rules pasted from different sources, minified snippets copied from a library, or a file edited by several people with different habits. Inconsistent spacing makes CSS harder to review and to search.
Formatting rewrites the layout only, putting each selector and declaration on its own line with the same indentation everywhere, so the cascade is easier to follow and diffs in version control show real changes instead of whitespace. It is also the quickest way to read the CSS behind a minified file when you are debugging a style you did not write. SCSS and Less are supported, including nesting, variables and mixins.
How to use the CSS Formatter
- 1
Paste your stylesheet, open a .css, .scss or .less file, or load the sample. Pasting, opening a file or loading the sample runs it automatically.
- 2
Pick the syntax that matches your code, plus indent size and line width.
- 3
Press Format. Each rule and declaration is placed on its own line with consistent spacing.
- 4
Copy the result or download it.
Examples
.btn{color:#fff;background:#16150f}.btn:hover{opacity:.9}.btn {
color: #fff;
background: #16150f;
}
.btn:hover {
opacity: 0.9;
}Good to know
- Formatting changes whitespace and quotes only. It does not reorder rules, remove duplicates or fix invalid properties.
- Code with syntax errors (such as a missing closing brace) cannot be formatted until the error is fixed.
Frequently asked questions
Which formatter does this use?
Prettier, the open-source formatter used in most code editors, so the output matches what your team gets from Prettier with the same settings.
Can I format SCSS and Less?
Yes. Choose SCSS or Less under Syntax so nesting, variables and mixins are formatted correctly.
Is my code uploaded to a server?
No. Processing happens entirely in your browser, in a background thread. Your input is never sent to our servers or stored anywhere.
Related tools
More tools that pair well with this one.