CSS Beautifier / Formatter
Formats CSS files with the chosen indentation level for optimal readability.
Option 2: Or upload your CSS file
Ctrl + Enter
Result
About the CSS beautifier
The beautifier turns a minified or badly indented stylesheet into readable CSS: every rule gets its own block, every declaration its own line, nested at-rules (@media, @supports, @keyframes, @font-face…) are indented, and a consistent space is placed after each colon and around combinators. It works on plain CSS as well as on SCSS and Less sources, and everything is processed locally in your browser.
Options
| Option | Effect |
|---|---|
| Indentation level | Spaces (or a tab) added for each nesting level: declarations inside a rule, rules inside an at-rule. |
| Blank line between rules | Inserts an empty line after every closing brace so that rules are visually separated. |
| One selector per line | Breaks a selector list such as h1, h2, h3 { … } into one selector per line. Unchecked, the list stays on one line with a space after each comma. |
| Preserve existing line breaks | Keeps the blank lines already present in the source (useful to keep sections apart). Unchecked, the layout is entirely rebuilt. |
| Spaces around combinators | Writes ul > li + li instead of ul>li+li. |
| End with a newline | Adds a final line break, as most linters and editors expect. |
Example
.card{margin:0 auto;padding:1rem}.card h2,.card h3{color:#333;font-weight:600}@media (max-width:600px){.card{padding:.5rem}}becomes (tabs shown as four spaces):
.card {
margin: 0 auto;
padding: 1rem
}
.card h2,
.card h3 {
color: #333;
font-weight: 600
}
@media (max-width:600px) {
.card {
padding: .5rem
}
}The opposite operation, producing the smallest possible file for production, is done by the CSS minifier.