CSS Formatter / Beautifier

Format messy or minified CSS. Optionally sort properties alphabetically (or by group) and normalize colors and units. Useful for cleaning up emitted CSS, comparing two stylesheets, or preparing snippets for code review.

How to use the CSS Formatter / Beautifier

Paste CSS. Format produces readable output with each declaration on its own line. Minify strips comments and whitespace. The optional sort-alphabetically pass reorders declarations within each rule — useful for diff-friendly stylesheets.

Formatting and tidying CSS

CSS arrives minified from a build, concatenated from several files, or hand-written with inconsistent spacing and property order, and in that state two stylesheets that are functionally identical produce a noisy diff that hides the real change. Declarations crammed onto one line are also hard to scan when you are hunting for the rule that sets a colour or a margin.

This formats CSS with one declaration per line and consistent indentation, can lowercase hex colours, and can optionally sort properties within each rule so two stylesheets diff cleanly. To go the other way and shrink CSS for production, use the CSS minifier; for the markup around your styles, the HTML formatter; and to put Tailwind utility classes into canonical order, the Tailwind class sorter.

Common use cases

• Expand minified CSS — turn a one-line stylesheet into readable rules.
• Diff two stylesheets — sort properties so the real change stands out.
• Normalise colours — lowercase hex values consistently.
• Clean an export — tidy CSS emitted by a tool for review.
• Prepare a snippet — format a rule before sharing in a code review.