CSS formatter
Beautify CSS with Prettier: one declaration per line, consistent spacing and 2-space, 4-space or tab indentation. Reports syntax errors. Runs in your browser.
About CSS formatter
The CSS formatter rewrites a stylesheet so each rule, selector and declaration sits on its own line with consistent spacing and indentation. Paste minified CSS from a production site or a messy stylesheet from a legacy project, and readable CSS appears in the indentation you choose.
Formatting is done by Prettier with its PostCSS-based CSS parser, the same engine many teams run in their editors and pre-commit hooks, so the result matches a typical project’s style. It handles media queries, custom properties, nested rules and modern at-rules, and it runs entirely in your browser.
How to use CSS formatter
- Paste CSS into the input box, or open or drop a .css file.
- Choose 2 spaces, 4 spaces or Tabs for the indentation.
- Review the formatted stylesheet, or fix the reported syntax error.
- Copy the CSS or download it as a .css file.
Features
- Puts each declaration, and each selector in a selector list, on its own line.
- Normalizes spacing around colons, braces, commas and combinators.
- Adds a semicolon after the last declaration in each block.
- Supports media queries, custom properties, nested rules and other modern syntax.
- Keeps comments in place and indents with 2 spaces, 4 spaces or tabs.
Common uses
- Reading a minified stylesheet from a website or third-party library.
- Cleaning up CSS before a code review or commit.
- Making CSS copied from browser developer tools consistent.
- Comparing two stylesheets after formatting them the same way.
Frequently asked questions
What is the difference between the CSS formatter and the CSS minifier?
The formatter adds line breaks and indentation so the stylesheet is easy to read and edit. The minifier does the opposite, removing comments and whitespace to make the file smaller for delivery. Format while developing; minify for production.
Does it support SCSS or Less?
The tool uses Prettier’s CSS parser, which is meant for plain CSS. Simple SCSS or Less that looks like nested CSS may format correctly, but mixins, functions and // comments can cause errors or unexpected output. Format those files in your editor with the matching Prettier parser.
Will formatting change how my CSS behaves?
No. Prettier changes whitespace, line breaks and minor punctuation, such as adding a final semicolon or using double quotes for strings. Selectors, property values and rule order stay the same, so the browser applies the styles exactly as before.
Why does the formatter report a syntax error?
Prettier stops when it cannot parse the stylesheet, for example because of an unclosed brace, comment or string. The message shows what the parser found and where. Fix the problem in the input and the formatted CSS appears.
Can I control line width or quote style?
No. Only indentation is configurable. Everything else follows Prettier’s defaults, such as an 80-character line width and double quotes, so the output matches projects that run Prettier without extra configuration.
Is my input uploaded?
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.
Your privacy comes first
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.