CSS Formatter

What Is a CSS Formatter?

A CSS formatter (also called a CSS beautifier) automatically reformats your stylesheets into clean, consistently indented, readable code. Whether you've been handed minified production CSS, inherited a messy codebase, or just want to enforce a consistent style before committing, a formatter eliminates manual cleanup. This tool is powered by Prettier — the industry-standard opinionated code formatter — and runs entirely in your browser. Your CSS never leaves your machine.

How to Format CSS Online

1. Paste your CSS into the Input pane on the left, or click Upload to load a .css file from disk.
2. Click Sample to load example CSS and see the tool in action instantly.
3. Choose an indent size — 2, 4, or 6 spaces, or Tab for tab-indented projects.
4. Toggle Sort props to alphabetise declarations within each CSS rule.
5. Toggle No comments to strip all /* */ CSS comments from the output.
6. Toggle Vendor prefix to auto-add -webkit-, -moz-, and -ms- prefixes for properties like transform, animation, and user-select.
7. Toggle Split selectors to put each selector in a multi-selector rule onto its own line (e.g. .foo, .bar { } → each selector on a separate line).
8. Use Break to control blank lines — Off (none), Rule (blank line between each rule), or Prop (blank line after each property).
9. Enable Live mode to auto-format as you type, with a 400 ms debounce.
10. Click Format to run formatting. Formatted CSS appears in the Output pane with syntax highlighting.
11. Click Copy to copy the output, or Download to save as formatted.css.
12. The Original / Formatted size badge in the header shows exactly how many bytes formatting adds or removes.

Understanding the Formatting Options

• Indent size — Controls the number of spaces (or a tab character) used for each level of indentation. 2 spaces is the web standard; 4 spaces is common in legacy projects; Tab is used by teams that enforce tab-based indentation.
• Sort properties — Alphabetises every property declaration within each CSS rule. Makes it far easier to scan for specific properties in large stylesheets and eliminates debates about property ordering in code reviews.
• No comments — Strips all /* */ CSS comments from the output. Useful when preparing CSS for a minifier or when producing a clean reference copy without inline notes.
• Vendor prefixes — Auto-adds browser-specific prefixes (-webkit-, -moz-, -ms-) for properties like transform, transition, animation, user-select, and display: flex. Useful when supporting older browsers that require prefixed properties.
• Split selectors — When a CSS rule targets multiple selectors separated by commas (e.g. h1, h2, h3 { }), this option puts each selector on its own line. Many style guides require this for readability.
• Break: Rule — Adds a blank line between each CSS rule block, making large stylesheets easier to scan visually.
• Break: Prop — Adds a blank line after each property declaration. Maximises vertical whitespace for very detailed annotations.

CSS Formatting Best Practices

• Use 2-space indentation for web projects — it's the most widely used convention and matches most style guides (Google, Airbnb).
• Keep each property declaration on its own line — never write color: red; background: blue; on one line, even for short rules.
• Place the opening brace on the same line as the selector: .foo { not .foo\n{.
• Use Sort properties for large shared stylesheets to speed up property lookup and avoid duplicate declarations.
• Add Vendor prefixes only for legacy browser support — modern browsers no longer require them for most properties. Check caniuse.com before adding prefixes to a new project.
• Run the formatter before every commit to keep your CSS diff clean — only intentional changes show up, not formatting noise.

Frequently Asked Questions

What is a CSS formatter?

A CSS formatter reads your stylesheet and reprints it according to a consistent set of rules: fixed indentation, one property per line, opening braces on the same line, and so on. This tool uses Prettier as its formatting engine, which produces the same output regardless of how inconsistently the input was written.

Does this tool support SCSS or Less?

This tool formats plain CSS only. For SCSS, use the SCSS Formatter. For Less, use the Less Formatter. All three use the same Prettier CSS parser family, so the output style is consistent across all three tools.

Is my CSS code sent to a server?

No. All formatting is performed locally in your browser using Prettier's WebAssembly build. Your CSS code never leaves your machine and is never stored anywhere. This makes the tool safe to use with proprietary or unreleased code.

What does "Sort Properties" do?

Sort Properties alphabetises the declarations within each CSS rule block. For example, z-index, background, color would be reordered to background, color, z-index. It does not reorder the rules themselves — only the properties inside each rule.

Can I format already-minified CSS?

Yes — paste the minified CSS and click Format. Prettier will parse and reprint it in fully formatted form regardless of how compressed the input is. This is one of the most common use cases: inspecting production CSS that has been minified for deployment.

What indent size should I use?

2 spaces is the web standard and the default. Most major style guides (Google, Airbnb, CSS-Tricks) recommend 2 spaces for CSS. Use 4 spaces if your project already uses 4-space indentation throughout, or Tab if your team enforces tab-based indentation via an .editorconfig file.

Related CSS Tools

After formatting your CSS, you may also want to: Validate CSS for syntax errors · Minify CSS for production · Format SCSS · Format Less · Convert CSS to SCSS