About the CSS Formatter
Minified stylesheets from a build or a third-party theme are impossible to read and even harder to diff. This formatter expands them into the conventional layout: each selector list on its own lines if you want it, an opening brace, one declaration per line, a closing brace, and a blank line between rules. Nested at-rules such as @media, @supports and @layer are indented one level, and comments are kept where they were.
Before formatting, the stylesheet is checked for unbalanced braces, unterminated strings and comments, and declarations missing a colon or value. Problems are reported with the line and column so you can fix them in the left pane. Custom properties, vendor prefixes, !important and modern syntax such as nesting and container queries pass through unchanged.
Property order is never changed; tools that sort properties are making a stylistic choice this formatter leaves to you. For the opposite direction, the CSS Minifier compresses the result for production, and the CSS Validator gives a fuller syntax check.
How to use
- Paste CSS on the left or upload a .css file.
- Choose an indent and whether comma-separated selectors should each get their own line.
- Copy the formatted CSS or download it. Swap sends it to the minifier.
Common questions
- Does it sort or rename properties?
- No. Declarations stay in the order you wrote them and nothing is renamed or shortened.
- Can it format SCSS or LESS?
- Plain nesting usually formats fine, but variables, mixins and functions are better handled by the SCSS Formatter and LESS Formatter, which parse those syntaxes.
- Why does it report an error on a valid stylesheet?
- The checker is strict about braces and colons. A stray semicolon or a comment containing an unmatched brace can trigger it; the line number points to the spot.
- Are comments preserved?
- Yes, in their original position.