About the CSS Formatter
The formatter uses Prettier's PostCSS-based parser. Each selector in a list gets its own line, each declaration its own line, and spacing around :, ,, combinators and braces is normalized. Numbers are printed consistently (.5 becomes 0.5), hex colors are lowercased, and string quotes follow the Single quotes setting. Comments are kept.
Pick SCSS or Less for preprocessor syntax — nesting, @mixin/@include, variables like $gap or @gap, maps and guards. Plain CSS mode also understands modern syntax such as native nesting with &, custom properties, @layer, @container and color functions like color-mix().
Formatting is the reverse of minification: use it to read a production stylesheet you only have in minified form, then use the CSS Minifier to shrink it again. Prettier does not reorder properties or remove duplicates — it only changes layout. Syntax errors, such as a missing closing brace, are reported with the line and column.
How to use it
- Paste CSS, SCSS or Less.
- Choose the syntax, indentation and print width.
- Toggle single quotes if your style guide requires them.
- Copy or download the formatted stylesheet.
Frequently asked questions
Can I unminify a minified CSS file?
Does it sort CSS properties?
What is the difference between SCSS and Less mode?
$x vs @x), mixins and nesting are parsed correctly. Plain CSS mode rejects some preprocessor-only constructs.