One declaration per line
Every property gets its own row, with a trailing semicolon — including the last one in a block, which people habitually leave off and then trip over when they add the next rule.
CSS formatter
Paste a minified or messy stylesheet and get it back with one declaration per line, properly indented media queries, and unbalanced braces pointed out.
Your CSS
0 lines
Format
Formatted
0 lines
Paste CSS on the left, then press the button.
How it reads your stylesheet
CSS looks simple to format until you meet a semicolon inside url(), a brace
inside a string, or a comment containing a closing brace. This formatter scans character by character and
tracks strings, comments and parentheses, so none of those split a rule in the wrong place.
Nested at-rules are indented properly. @media, @supports, @layer
and @container all open a block, and the rules inside them step in one level.
Formatted output
@media (max-width: 640px) {
.card {
padding: 16px;
}
.grid {
grid-template-columns: 1fr;
}
}What it normalises
One selector per line
A comma-separated selector list is broken so each selector is visible on its own. Long lists become scannable instead of running off the edge of the screen.
Space after the colon
color:red becomes color: red. Universal convention and slightly easier to
read at speed.
Combinators spaced
.a>.b becomes .a > .b. Makes the difference between a descendant and a
child selector obvious at a glance.
Blank line between rules
Top-level rules get one line of breathing room, which is what makes a long stylesheet skimmable.
Values left alone
Colours keep their case and their format. calc(), gradients, custom properties and
url() contents are passed through untouched.
Unbalanced braces
The single most common CSS bug is a missing closing brace. It does not throw an error — the browser silently discards everything from the mistake to the next brace it can make sense of, so a rule three hundred lines further down mysteriously stops applying.
Format the file and the problem becomes visible: indentation that keeps going right and never comes back. The tool also reports the count directly under the panels when the braces do not balance.
If a rule is not applying and the selector looks correct, check brace balance before you
check anything else. It is the cause far more often than specificity is.
Preprocessor files
SCSS, Sass and Less are different languages that happen to look like CSS. Nesting, @mixin,
$variables and & parent selectors are not CSS syntax, and a CSS formatter will
handle them approximately at best.
Use this on compiled CSS output. For source files, use Prettier or your preprocessor's own formatter, which understand the syntax properly.
Plain CSS custom properties — --brand: #3B4FE4 — are real CSS and are handled correctly.
Questions about this tool
Does it change how my styles apply?
No. Whitespace between CSS tokens is insignificant, so the parsed result is identical. Declaration order, specificity and the cascade are all untouched. The only rewriting is the spacing around colons and combinators, neither of which changes meaning.
Can it handle a minified stylesheet?
That is what most people arrive with. Paste the whole thing — a single 40 KB line is fine — and it comes back structured. This is the fastest way to read a production stylesheet whose source you do not have.
What happens to my comments?
Kept by default and indented to the right level. Untick Keep comments to drop them, which is useful when you want to see the rules without the annotation.
Does it sort properties or remove duplicates?
No, and deliberately. Property order matters in CSS — a later declaration beats an earlier one of equal specificity, and shorthand properties reset the longhands that follow them. A formatter that reorders declarations would silently change your design.
Will it work on Tailwind output?
Yes, and the result is enormous but correct. Tailwind's compiled output is thousands of small rules; formatting it is useful for inspecting what a class actually does, less useful as a file to keep.
Related tools
CSS Minifier
Compress stylesheets for production.
OpenCSS Gradient Generator
Build linear, radial and conic gradients visually.
OpenBox Shadow Generator
Layer CSS shadows and copy the result.
OpenHTML Formatter
Indent and structure any HTML file.
OpenHTML Beautifier
Turn minified HTML back into readable code.
OpenHTML Pretty Printer
Pretty-print HTML with the indent you want.
OpenLearn the why, not just the how
Longer reading on formatting, indentation and minification.