CodeBeautifyCSS & SCSS Formatter & Beautifier
Format, beautify, or minify CSS and SCSS online. Indent nested rules and selectors, sort top-level rules alphabetically, and compress stylesheets for production.
Rule sorting is best-effort for top-level blocks; nested @media rules are moved as a single block.
Why format CSS or SCSS?
Stylesheets pulled from a minified production bundle, generated by a build tool, or pasted from a browser's dev tools often lose all indentation. Reformatting restores the visual structure of selectors, nested rules, and declaration blocks, making it far easier to scan a stylesheet or spot a misplaced brace.
What this tool does
- Beautify — reindents rules and declarations with Prettier's CSS/SCSS printer.
- Sort rules — alphabetizes top-level selectors, useful for organizing a flat stylesheet (see the FAQ for a caution about specificity).
- Minify — strips comments and collapses whitespace for production-sized output.
Example
| Minified | Beautified |
|---|---|
.btn{color:#fff;background:#4f46e5} | .btn { |
Frequently asked questions
How do I format CSS online?
Paste your CSS or SCSS into the input box and click Beautify. The formatter reindents rules and declarations instantly using Prettier.
How do I beautify CSS?
Beautifying CSS restores indentation to a minified stylesheet. Click Beautify, choose CSS or SCSS, and the beautifier reformats your code immediately in the browser.
What is the difference between CSS and SCSS?
SCSS is Sass's modern syntax — a superset of CSS that adds variables, nesting, mixins, and functions, then compiles down to plain CSS. Every valid CSS file is also valid SCSS, but SCSS files often use features a plain CSS parser can't understand.
Does sorting rules change how styles apply?
It can, if two selectors have equal specificity and target the same property — CSS resolves ties by source order, so reordering rules can change the winner in that specific case. Use rule sorting mainly for organization when you know your selectors don't overlap, and review the result on anything specificity-sensitive.