CSS Formatter

Beautify CSS with consistent indentation and spacing.

CSS225 characters

Indentation

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

1
Paste your CSSMinified or messy — both work.
2
Choose the indent widthTwo spaces is the common convention.
3
Copy 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.