CSS Formatter
A CSS Formatter expands minified or inconsistent stylesheets into readable, consistently indented CSS — and also handles SCSS and Less — using Prettier's engine entirely in your browser.
(formatted output appears here)About CSS Formatter
Paste a stylesheet that arrived as one long line and get it back with one declaration per line, normalised spacing, and consistent indentation. The same engine handles SCSS and Less, including nesting, mixins, and variables, so you can clean up preprocessor source as easily as plain CSS. Prettier is bundled with the page rather than fetched from a CDN, so nothing you paste is uploaded, and a syntax error reports the exact line and column rather than producing mangled output.
What CSS Formatter does
- CSS, SCSS, and Less in one tool
- Runs the real Prettier engine, self-hosted — no CDN
- Indent width or tabs, plus configurable wrap column
- Single or double quote normalisation
- Exact line and column on a parse error
- Copy or download the formatted stylesheet
When to reach for CSS Formatter
- Reading a minified stylesheet pulled from a live site
- Cleaning up CSS copied out of a design tool or CMS
- Normalising a stylesheet before reviewing it in a diff
- Tidying SCSS or Less before committing
How to use CSS Formatter
- 01
Paste your CSS
Paste CSS, SCSS, or Less into the input pane.
- 02
Pick the language
Choose CSS, SCSS, or Less and set indentation.
- 03
Copy or download
Copy the formatted stylesheet or download it.
When to use CSS Formatter vs alternatives
| Alternative | Use CSS Formatter when… | Use the alternative when… |
|---|---|---|
| Your editor's formatter | the CSS isn't in a project yet, or you're on a machine you can't install on. | the file is already open in your editor. |
| DevTools' pretty-print | you want output you can copy, configure, and download. | you only need to read the CSS inside the browser inspector. |