CSS Formatter
Beautify CSS with consistent indentation and spacing.
CSS Formatter
Developer tool running locally in browser
What does CSS Formatter do?
Format CSS, SCSS and Less into a consistent, readable style: one declaration per line, normalised spacing around colons and braces, and correct handling of media queries and nested rules.
How to Use CSS Formatter
- 1Paste your CSSMinified or messy — both work.
- 2Choose the indent widthTwo spaces is the common convention.
- 3Copy the formatted CSSReady to commit.
Key Features
- One declaration per line with normalised spacing
- Media queries and nested rules indented correctly
- SCSS and Less nesting supported
- Configurable indent width
- Comments preserved in place
Frequently Asked Questions
Does formatting change how my styles apply?
No. CSS ignores whitespace between tokens, so only readability changes. Selector order and specificity are untouched, which is what determines what wins.
Can it format SCSS and Less?
Yes, for nesting, variables and comments. It formats rather than compiles, so mixins and functions are laid out but not evaluated.
Will it reorder my properties?
No. Property order can matter — later declarations override earlier ones, and shorthand properties reset longhand values. Reordering would risk changing behaviour, so it is left alone.
What if my CSS has a syntax error?
The formatter reports it rather than guessing. An unclosed brace is the usual culprit and the message points at the position.
Input is processed in your browser and never transmitted. That said, treat any web page as untrusted for live production secrets — rotate anything you paste anywhere.