How the CSS beautifier works
Paste CSS into the left editor and click Beautify. The code is passed to css_beautify from the open-source js-beautify library (version 1.14.11), running in your browser. The page uses a fixed set of options:
- 2 spaces of indentation per nesting level
- one declaration per line, with a space after each colon
- each selector in a comma-separated list on its own line
- a blank line between rules, and long runs of blank lines collapsed
- comments kept where they were
The stats line above the editors shows the size of the input and output. Beautified CSS is always larger, because indentation and line breaks are extra bytes. That is expected: beautify for reading and editing, then minify again before you ship.
Example: expanding a minified stylesheet
A typical case is a single line copied from a production stylesheet or a browser's network tab:
.btn,.btn-primary{display:inline-flex;padding:.5rem 1rem;border:1px solid #0d6efd}.btn:hover{background:#0b5ed7}@media (max-width:600px){.btn{width:100%}}
After Beautify:
.btn,
.btn-primary {
display: inline-flex;
padding: .5rem 1rem;
border: 1px solid #0d6efd
}
.btn:hover {
background: #0b5ed7
}
@media (max-width:600px) {
.btn {
width: 100%
}
}
Notice what did not change. The last declaration in each rule still has no semicolon, because the minifier removed it and the beautifier does not add it back. The media query keeps (max-width:600px) without a space, and .5rem keeps its missing leading zero. Only layout changes.
Problems the new layout helps you find
The beautifier does not report errors, but it lays code out in a way that makes common mistakes visible.
A rule that never closes
.card { padding: 1rem
.title { font-weight: 700; }
.footer { margin: 0 }
Beautified, this becomes:
.card {
padding: 1rem .title {
font-weight: 700;
}
.footer {
margin: 0
}
The missing ; and } make .title part of the padding value and push every rule after it one level deeper, inside .card. The browser treats the rest of the file the same way, so those rules stop applying. If the output suddenly gains an extra level of indentation, look for the missing brace just above that point.
A lone semicolon
Input such as .a{color:red;;} produces a line containing only ;. It is harmless in most browsers, but it usually marks a copy and paste accident or a deleted declaration.
Adding lines after a declaration with no semicolon
Minified CSS drops the final semicolon in each rule. After beautifying, it is easy to add a new line below and forget it:
.btn {
border: 1px solid #0d6efd
color: #fff;
}
CSS reads this as one border value, 1px solid #0d6efd color: #fff, which is invalid, so both declarations are dropped. Add the semicolon to the line above before you add anything.
What the beautifier does not do
- No validation. Unknown properties, bad values, and unbalanced braces pass through unchanged. Check the result in your browser's developer tools.
- No restyling of values. It does not change color formats, units, letter case, or property order, and it does not add vendor prefixes.
- Combinators stay compact.
a>b~c+d is left as written. Spacing inside selectors and media queries is not normalized.
- No lost information comes back. Comments and formatting removed by a minifier are gone. Beautifying restores a readable layout, not the original source file.
- No configuration. Indent size and brace style are fixed.
When to use a different tool
Frequently asked questions
Does beautifying CSS change how the page looks?
No. The beautifier only changes whitespace and line breaks. Selectors, properties, values, and comments are kept as they are, so the browser applies exactly the same styles.
Can I choose tabs or 4-space indentation?
Not on this page. The output always uses 2 spaces per level, one declaration per line, and a blank line between rules. If your project uses a different style, reformat the result with your editor or a tool such as Prettier configured to your settings.
Does it work with SCSS or LESS?
Mostly. Nested rules, the & parent selector, variables, and @mixin or @include lines are indented correctly. It does not compile SCSS or LESS to CSS, and unusual preprocessor syntax may be laid out oddly, so check the result.
Why is my CSS still broken after beautifying it?
The beautifier does not validate or repair CSS. A missing closing brace, a missing semicolon, or a typo in a property name is carried into the output unchanged. The new layout often makes the mistake easier to spot, for example a lone semicolon on its own line or a rule that never closes.
Is my CSS uploaded anywhere?
No. Formatting runs in your browser with the js-beautify library. The input editor keeps a copy in your browser local storage so it survives a reload, and Clear removes it. Import URL fetches the file from your browser, and the site security policy only allows this site, cdnjs, and jsDelivr as sources.