CSS Formatter

The CSS Formatter (CSS Beautifier) reformats compressed or inline CSS into a consistently indented, human-readable form — with each property on its own line, selectors separated by newlines, and nested rules properly indented.

Minified CSS from a build pipeline or copied from a browser DevTools Sources panel is a wall of text. Finding the rule you need to modify, understanding specificity, or reviewing a colleague's CSS in a code review is nearly impossible without proper formatting.

How to use it: paste any CSS — vanilla, SCSS/SASS syntax, or vendor-prefixed CSS from a DevTools panel. The formatter places each declaration on its own line, adds a blank line between rule blocks, indents nested rules (for SCSS/Sass), and adds a space before the opening brace: .selector { becomes .selector {.

Formatting conventions applied: single space between selector and opening brace, one declaration per line with consistent 2-space or 4-space indentation, no trailing whitespace on lines, closing brace on its own line, blank line between rule blocks, media query content indented one extra level.

Use cases: reading CSS from a browser DevTools panel to understand how styles were applied, formatting CSS copied from a template or framework to understand its structure, preparing CSS for a code review, and beautifying SCSS/SASS files that were minified during build.