CSS Formatter

Paste compressed or inconsistent CSS and get neatly formatted stylesheets with one declaration per line and a blank line between rules. You can choose the indentation, brace style and wrap length. The tool also warns if braces or parentheses look unbalanced, which usually means a rule is broken.

How to use the CSS Formatter

1. Paste your CSS or press Load example.
2. Choose indent size, brace style and wrap length.
3. Press Format CSS.
4. Check any warnings, then copy or download the stylesheet.

Features

• One declaration per line with consistent indentation
• Separate lines for comma-separated selectors
• Collapse, expand or end-expand brace styles
• Handles media queries and nested at-rules
• Unbalanced brace and parenthesis warnings

Benefits

• Understand third-party or minified stylesheets quickly
• Keep a consistent style across a project
• Runs locally in your browser

Frequently asked questions

Can it format SCSS or Less?

Simple SCSS and Less usually format well because the syntax is similar, but features like mixins with complex arguments may not indent perfectly.

Does it reorder or remove properties?

No. Only whitespace and line breaks change; your selectors and declarations stay in the same order.

How do I make CSS smaller instead?

Use the Code Minifier tool, which removes comments and whitespace and reports how many bytes you saved.

Related tools

• JSON Formatter — Beautify or minify JSON with 2-space, 4-space or tab indents, sort keys and browse it as a collapsible tree.
• JSON Validator — Check JSON syntax as you type, see the exact line and column of any error and get warnings for duplicate keys.
• XML Formatter — Pretty-print or minify XML with comments, CDATA and DOCTYPE support, plus a well-formedness check with error positions.
• HTML Formatter — Beautify HTML with your choice of indentation and line wrapping, including inline <script> and <style> blocks.
• JavaScript Formatter — Beautify JavaScript with configurable indentation, brace style and line wrapping to make minified code readable.
• Code Minifier — Minify JavaScript with Terser, plus CSS and HTML, and see the original size, minified size and percentage saved.