CSS Beautifier / Formatter (CSS, SCSS, LESS)
Format minified or messy CSS, SCSS and LESS: one declaration per line, nested rules indented, selectors split, lowercase hex and optional property sorting.
Minified stylesheets and copied snippets are hard to read and harder to edit. This beautifier rebuilds the structure: each declaration on its own line, nested blocks indented one level deeper, comma-separated selectors on separate lines and spaces around child, sibling and adjacent combinators. It understands SCSS and LESS nesting, & parent selectors, #{} interpolation and // comments, and leaves strings and url() exactly as written.
How to use this tool
- Paste CSS, SCSS or LESS (minified or messy).
- Choose 2 spaces, 4 spaces or tabs.
- Keep or drop the blank line between rules.
- Optionally lowercase hex colours or sort properties alphabetically.
- Copy the formatted code.
Formula
selector, selector { property: value; } → one selector per line, one declaration per line, one indent per nesting level
The text is tokenized so that braces, colons and semicolons inside quotes, comments, url() and #{} are never treated as structure. Values get single spaces, a space after each comma and before !important. The last declaration in a block gets its missing semicolon. Unbalanced braces are reported with the line and column instead of producing broken output.
Example
The sample .card,.card--wide{padding:16px 24px;border:1px solid #DDD;…} becomes .card, and .card--wide { on two lines, followed by four indented declarations such as border: 1px solid #ddd; and box-shadow: 0 1px 2px rgba(0, 0, 0, .08);. The media query becomes @media (max-width: 600px) { with its two rules indented inside. In total the tool reports 5 rules (counting the media query) and 8 declarations.
Frequently asked questions
Does formatting change how the CSS works?
No. Only whitespace, the final semicolons and (if ticked) the case of hex colours change. Property sorting would matter where a shorthand such as margin and a longhand such as margin-top are in the same rule, because their order decides which wins — so such rules are left in their original order. One exception: a custom property whose value contains braces ({ }) is laid out like a nested block and gets a semicolon added inside — check such values after formatting.
Can it format SCSS and LESS?
Yes for layout: nested rules, mixins, @include, variables and interpolation are indented like CSS. It does not compile them — variables and mixins stay as you wrote them.
Why is a comment moved to its own line?
Comments between rules or declarations are kept on their own lines. A comment inside a value stays where it was.
Is my code uploaded?
No. Formatting runs in your browser.
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-beautifier/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Beautifier / Formatter (CSS, SCSS, LESS). https://kakao.mobile/tools/css-beautifier/
“CSS Beautifier / Formatter (CSS, SCSS, LESS).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-beautifier/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms