Format and beautify CSS

Production CSS is usually minified: every rule on one line, no spaces, no line breaks. That is right for speed, but when you need to understand why a button looks wrong on a live site, copy a component's styles from a theme, or review what a framework generated, you need it back in a readable shape. This formatter puts every declaration on its own line, indents rules inside @media, @supports and @layer blocks, and spaces selectors and values consistently.

You choose the indentation (two spaces, four spaces or tabs), whether a selector list such as "h1, h2, h3" is split one selector per line, and whether rules are separated by a blank line. Comments are kept where they are. Custom properties, calc() expressions, gradients with many stops and vendor-prefixed properties come through unchanged apart from spacing, so the stylesheet behaves exactly as before.

The formatting engine is the CSS beautifier from js-beautify (MIT), about 6 KB compressed, downloaded only when you first format something on this page. It does not validate or rewrite your CSS: invalid declarations stay invalid and nothing is reordered or merged. Nothing you paste is sent anywhere, which matters for unreleased designs and client work.