Format CSS
Format compact or poorly indented CSS code to make it readable, using Prettier's formatting engine directly in your browser.
Processed on your device. Nothing is sent to any server.
Uses the same formatting engine as Prettier to give CSS consistent indentation and spacing, including nested rules and multiple selectors.
Use cases
- Formatting minified CSS so it can be read and edited.
- Preparing a readable CSS snippet for documentation.
- Visually reviewing the structure of a complex stylesheet.
How it works
- 1
Paste your CSS
Type or paste the CSS code into the input box.
- 2
Format it
Click Format and copy or download the result.
Technical details
- It applies Prettier's default options: 2-space indentation, one declaration per line and each selector in a list on its own line.
- It normalizes style details, such as double quotes or the case of hex colors, without changing what the CSS does.
- If the CSS has a syntax error (for example, an unclosed brace), you'll see an error instead of a half-formatted result.
Frequently asked questions
Does it support SCSS or LESS?
The formatter is designed for standard CSS; preprocessor-specific syntax like SCSS or LESS may not format correctly.