CSS Formatter beautifies minified or compressed CSS by restoring proper indentation, line breaks, and spacing around selectors, properties, and values. Clean CSS is dramatically easier to read during debugging, code review, and collaborative development. The formatter supports standard CSS, media queries, keyframe animations, and CSS custom properties (variables).
How it Works
1Paste your minified or unformatted CSS into the input panel.
2The formatter tokenises the CSS into selectors, property declarations, and at-rules.
3Each rule block is expanded with one property per line and consistent indentation.
4The formatted CSS is displayed and ready to copy or download.
Frequently Asked Questions
Does formatting change the visual output of my CSS?
No. CSS parsers ignore whitespace outside of string values and selectors. Formatted CSS produces exactly the same visual result as minified CSS in every browser.
Does the formatter support SCSS or Less?
The formatter is designed for standard CSS. SCSS and Less may partially format correctly if they don't use preprocessor-specific syntax, but nesting, mixins, and variables unique to those languages are not guaranteed to format correctly.
Why would I format CSS I'm going to minify anyway?
Formatting is useful during development and debugging. You'd typically work with formatted CSS in your source files and then run a build step to minify for production. This tool helps when you receive minified CSS from a third party and need to understand or modify it.
Can I format CSS with vendor prefixes?
Yes. Vendor-prefixed properties (-webkit-, -moz-, -ms-, -o-) are standard property declarations as far as the formatter is concerned and are handled correctly.