CSS Formatter
Paste minified or messy CSS, SCSS, or LESS and get it cleanly re-indented. Optionally sort declarations (A–Z or grouped), split comma selectors, and uppercase hex colors — all locally, nothing is uploaded.
About this tool
CSS Formatter pretty-prints (beautifies) minified or messy CSS, SCSS, and LESS. It puts
one declaration per line, normalizes prop: value spacing, indents nested rules, and preserves
your comments — all in your browser. Nothing is uploaded.
Beyond plain re-indenting it can, optionally:
- Sort declarations within each rule — alphabetically (A–Z) or by a concentric grouped order (custom properties → positioning → box model → border → background/color → typography → visual effects → interaction).
- Split comma selectors onto their own lines (
h1, h2→h1,/h2). - Uppercase hex colors (
#abcdef→#ABCDEF).
It understands SCSS/LESS nesting (&:hover, @media { … }, @mixin/@include), $/@
variables, and // line comments — while leaving url(http://…) and quoted strings untouched.
Example
Input:
.btn{color:#abcdef;margin:0;&:hover{color:red}}
Output (defaults — 2-space indent, source order):
.btn {
color: #abcdef;
margin: 0;
&:hover {
color: red;
}
}
Limits
- Whitespace, casing, and order only — values are never rewritten. It will not drop zero units,
shorten
#ffffffto#fff, collapse shorthands, or minify (that's a different, lossy operation — use a CSS minifier for that). - Sorting reorders declarations, which can change the cascade for duplicate properties in the same rule — leave sort on Keep source order if a rule relies on later-wins duplicates.
- It's a forgiving formatter, not a validator: badly broken CSS is reindented as best it can, not rejected.
FAQ
Does it work with SCSS and LESS, not just plain CSS?
Yes. Nested rules, the & parent selector, block at-rules like @media/@mixin, @include
statements, $foo/@foo variables, and // line comments are all handled. Plain CSS is just the
case with no nesting.
What does "grouped" sorting order look like?
Grouped (a.k.a. concentric or idiomatic) order lists custom properties first, then positioning, then the box model, borders, background/color, typography, visual effects, and interaction. Any property not in the built-in table falls back to alphabetical after the known ones, so the result is always deterministic.
Will it change my colors or values?
No — formatting is lossless. The only value-level change is optional: turning on Uppercase hex
colors rewrites #abcdef to #ABCDEF. It never shortens hex, drops units, collapses shorthands,
or otherwise rewrites values.
Is my CSS uploaded anywhere?
No. The formatter runs entirely in your browser via WebAssembly — the CSS you paste never leaves your machine.
Can it minify CSS?
No, this tool only beautifies (expands) CSS. Minification is the opposite, lossy transform — reach for a dedicated CSS minifier if you want to shrink output.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool format-css ".btn{color:#abcdef;margin:0;&:hover{color:red}}"New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/format-css/?input=.btn%7Bcolor%3A%23abcdef%3Bmargin%3A0%3B%26%3Ahover%7Bcolor%3Ared%7D%7D&indent=2&indent_char=space&sort=none&selectors_per_line=true&uppercase_hex=trueMachine-readable descriptor: tool.json — title + parameters JSON Schema for agents.