CSS Beautifier

CSS Beautifier – Pretty Print Minified CSS

Production stylesheets are usually minified into a single line. The CSS beautifier expands them into readable CSS: one selector per line, one declaration per line, consistent spacing after colons, and nested blocks such as @media and @supports properly indented. It is built on Prettier's PostCSS-based formatter.

How to use the CSS formatter

1. Paste CSS or open a .css file — or click Sample to see a minified stylesheet.
2. Choose 2 spaces, 4 spaces, or tabs and a line width.
3. Copy the formatted CSS or download it.

What gets formatted

• Selectors in a list are placed on separate lines (h1, / h2 {).
• Every declaration ends with a semicolon, even the last one in a block.
• Colors, numbers, and units are normalized lightly (for example .5 stays valid, keywords are lowercased).
• Long values like grid-template-columns, transition, or comma-separated font-family lists are wrapped when they exceed the line width.
• Comments are kept where they were.

Use cases

Inspect the styles of a website you are debugging, review a stylesheet generated by a CSS-in-JS tool or a page builder, or clean up CSS before refactoring it into a preprocessor. Beautified CSS also produces much better diffs in version control because every change is on its own line.

Need the opposite?

To ship CSS, minify it again with the CSS Minifier, which also merges duplicate rules. To check for typos in property names and invalid values, run the CSS Validator. Working with preprocessors? Use the SCSS Beautifier or LESS Beautifier so that nesting, mixins, and variables are understood.