CSS Beautifier

Beautify CSS, SCSS, and LESS, powered by Prettier.

This free online CSS beautifier paste-and-goes — minified or messy stylesheets come back consistently indented with each declaration on its own line. No signup, runs entirely in your browser.

Syntax

Indent

Line width

CSS Input

Formatted

Loading formatter…

What does a CSS beautifier do?

A CSS beautifier rewrites your stylesheet with consistent spacing, indentation, and line breaks without changing what it does — turning minified or cramped CSS into something readable. This tool runs Prettier, the formatter most front-end teams already use, entirely in your browser.

Why beautify CSS

Minified CSS — the kind shipped in production bundles or pasted from a "view source" — squashes every rule onto as few lines as possible to save bytes. That's great for the browser, terrible for a human trying to read, debug, or copy a snippet out of it. Beautifying restores one declaration per line and consistent indentation so nested rules, media queries, and selector groups are easy to scan again.

The options that matter

Indent width is a matter of team convention — Prettier defaults to 2 spaces. Line width controls when Prettier starts wrapping long values (like multi-stop gradients or comma-separated selector lists) onto multiple lines; 80 is Prettier's default, though many teams use 100 or 120 for wider screens.

CSS, SCSS, and LESS

Switch the syntax option to match what you pasted. SCSS and LESS both support nested selectors and variables ($primary in SCSS, @primary in LESS), and Prettier's dedicated parser for each keeps that nesting and those variable declarations intact rather than treating them as invalid plain CSS.

Frequently asked questions

Paste your CSS, SCSS, or LESS into the input — the beautified result appears automatically on the right. Adjust indent width and line width from the options panel.

Prettier — the same widely-used code formatter many teams run in their editors and CI, running entirely client-side via its official standalone browser build. The formatting output matches what you'd get running Prettier locally.

Yes — pick SCSS or LESS from the syntax option and the tool switches to Prettier's parser for that language, so nested selectors, variables, and mixins format correctly.

No. Formatting runs locally in your browser via Prettier's client-side build — nothing you paste is ever sent anywhere.