CSS Formatter & Minifier
Format, beautify, and minify CSS code
Frequently Asked Questions
What does the CSS formatter do?
The CSS formatter indents selectors, declarations, nested rules, and media queries with a consistent style, turning minified CSS back into readable code. You can also minify — collapse CSS into a single line for production.
Common use cases?
Modify or inspect minified CSS from third-party scripts; unify team CSS style before code review; pretty-print CSS copied from DevTools before pasting it back to your IDE; consolidate inline styles into proper rule blocks.
Does it support SCSS, Less, or PostCSS?
The tool targets standard CSS. Preprocessor constructs (nesting, variables, mixins, @include, @mixin) may not be fully recognized. Compile SCSS/Less to CSS first, or use Prettier with the matching preset.
Does formatting change the order of my rules?
No. Only whitespace and line breaks change — properties are never sorted and selectors are never merged. For automatic property ordering, use stylelint with stylelint-order.
Is my data safe?
All formatting happens in the browser. Brand colors, proprietary component styles — nothing leaves your device.
How does this compare to Prettier or stylelint?
Prettier and stylelint live inside your project, driven by config files — great for repo-wide consistency. The CSS Formatter needs zero install and is perfect for ad-hoc snippets or cross-device work. They coexist: Prettier for daily projects, DevToolkit for quick checks.