What this CSS beautifier does
This CSS beautifier turns a wall of minified or badly indented CSS into something you can read:
one selector per line in a list, one declaration per line in a block, and every nested block —
@media, @supports, @container, native & nesting — indented one step further than its parent.
Choose 2 spaces, 4 spaces or tabs, and the result updates as you type, in your browser.
It shares its tokeniser with the CSS minifier on this site. The two tools read a stylesheet into the same tree and write it out in opposite directions, so what one flattens the other can open back up.
How to use it
- Paste the CSS you want to format online into the input box.
- Pick an indentation: 2 spaces, 4 spaces or a tab.
- Read the formatted output, with a count of blocks, declarations and lines underneath.
- Copy it, or download it as
styles.css.
What changes, and what does not
The output gets a space after each colon in a declaration, after each comma in a value, around the
>, + and ~ combinators in a selector, and before !important. Blank lines separate blocks from
one another, while a comment sits directly above the rule it describes, as people write it by hand.
What does not change is anything with meaning. Strings keep their inner spacing. A url() is left
as a single piece, so a data URI with semicolons in it survives. Custom properties are only
collapsed, never reshaped, because their value is text that JavaScript may read back. Inside
parentheses, such as :nth-child(2n+1) or calc(100% - 2rem), whitespace is kept as it was found:
a formatter has no business deciding that a minus sign is a hyphen.
When you need to unminify CSS
The usual reason is debugging. The DevTools panel shows a rule, you click through to the source, and the source is a single line of forty thousand characters. Pasting it here gives you something you can search, diff against an older copy, or read to understand how a third-party theme builds its layout.
The other reason is inheritance. A site arrives with no build step and one compressed stylesheet that someone has been editing by hand for years. Formatting it first makes every later change reviewable, and a text diff of the formatted versions shows exactly what each edit did.
Beautifier or linter
A beautifier fixes layout. It does not tell you that a property is misspelt, that two rules fight over the same element, or that a vendor prefix has been obsolete for a decade. For that you want a linter such as Stylelint in your editor. The two work well together: format first so the file is readable, then let the linter point at the problems.
Two spaces, four spaces or tabs
There is no correct answer, only a house style. Two spaces is the most common choice in front-end
projects and the default in Prettier, and it keeps deeply nested @media and @supports blocks from
drifting off the right edge. Four spaces reads more clearly at a glance. Tabs let each person set the
width in their own editor. Whichever you pick, match the rest of the codebase, so a later diff shows
real changes rather than a reindented file.