CSS Formatter - DigiKitApp

Format compact CSS into readable code.

When should you use this?

Use this when you need to make a cramped or inconsistently indented CSS file readable, for instance while reviewing someone else's stylesheet.

When shouldn't you use this?

If you're compiling CSS automatically with a build tool (Sass, PostCSS), it's usually more consistent to handle formatting as part of that build process instead.

Step-by-step

Paste your styles into the CSS code field. It can be a file squeezed onto one line or a snippet copied from your browser's developer tools.
Click Run.
Check that each selector and each property now sits on its own indented line.
Copy the output into your editor and carry on reviewing or editing there.

Example

You want to change the button colour in a ready-made WordPress theme, but its stylesheet is one long line. Paste that line in and format it, and the rules starting with .button, along with properties like background and border-radius, become easy to spot. Once you've found the rule you need, it's safer to add just that rule to a child theme or the additional CSS box than to edit the theme's own file.

Code review is another case. If a teammate sends a file with messy indentation, formatting it first makes it much easier to see which rule sits inside which media query, especially when @media blocks are nested.

What does the CSS formatter do?

The tool rewrites CSS with each rule block and each declaration on its own line, indented two spaces per nesting level. A new line starts after each opening brace and after each semicolon, and the closing brace steps back one level. Semicolons inside parentheses (for example url(data:image/png;base64,...)), quoted strings and comments are left intact. Rules inside @media are indented one level.

When using it

The tool is a character-based tidier, not a parser. With broken or unclosed braces the output will look wrong too.
Commas in selectors stay on the same line; it does not split each selector onto its own line.
Nested Sass/Less syntax and variables are not plain CSS; check the result by eye.
On bigger projects, the formatter in your editor (for example Prettier) keeps a team consistent.

Things to keep in mind

Formatting changes how the code looks, not how it behaves. If there's an error, like a missing closing brace, the output will look odd too. Fix that first.
Minified files have usually had their comments stripped already. Formatting won't bring them back.
Sass and Less are not plain CSS. Check the result carefully if your code has nested rules or variables.
On a team, agree on one indentation style. Otherwise every reformat produces large, noisy diffs in version control.

Frequently asked questions

Is the code/data I enter stored anywhere?

No, nothing is sent to a server or stored; processing happens entirely in your browser.

Does it work with large inputs?

Yes, though performance may degrade with very large inputs (several MB or more).

Is this tool free?

Yes, it's completely free for core use and requires no account.