Developer & Data Tools
CSS Formatter
Format and indent CSS so it is easy to read.
Runs in your browser Your input never leaves your device.
Report a problem with this tool
About this tool
Paste CSS and the tool lays it out with one declaration per line, braces on their own lines and a blank line between rules, using the js-beautify library. Choose 2 or 4 spaces for indentation. It only changes whitespace: it does not reorder properties, add missing semicolons, remove unused rules or check that your CSS is valid. If you need the opposite, a smaller file for production, use the CSS Minifier. Everything runs in your browser and your stylesheet is never uploaded.
How to use it
- Paste your CSS into the box.
- Choose a 2 or 4 space indent.
- Read the formatted CSS in the output.
- Press Copy to take it.
Example
Shown with the 4 space indent.
Input
a{color:red;margin:0 auto;}Result
a {
color: red;
margin: 0 auto;
}Common problems
- A missing semicolon stays missing
- The formatter does not add punctuation. Add the semicolon yourself if the last declaration lacks one.
- Selectors such as .a>p are not spaced out
- Whitespace inside selectors is left as written.
- Output looks wrong after a typo
- Unbalanced braces confuse any formatter. Check that every { has a matching }.