How it works
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.
Frequently Asked Questions
- The formatter handles SCSS syntax including nested rules, variables ($var), mixins (@mixin, @include), and &:hover style parent references. Pure Sass (indented syntax, no braces) is not supported.
- No. CSS property order is preserved exactly as in the input. Reordering properties (e.g., alphabetically or by type: positioning, box model, typography) is a separate concern not applied by the formatter.
- Vendor prefixes (-webkit-, -moz-, -ms-, -o-) are preserved exactly as written, on their own lines, with the same indentation as other declarations.
- Yes. Paste minified CSS from any source and the formatter restructures it into readable form with one declaration per line and proper indentation.
Can it format SCSS or Sass?
Does it reorder CSS properties?
What happens to vendor-prefixed properties?
Can it handle minified CSS from a CDN?
RankForge — Technical SEO Audit
Score any page out of 100, see every issue with the exact fix, generate JSON-LD schema and crawl up to 50 pages — all inside Chrome's side panel, with nothing sent to a server.