CSS formatter
A CSS formatter/minifier for stylesheet fragments, component styles and theme tokens: Prettier formatting, minify, copy, clear and useful syntax errors right in the browser.
How it works
The CSS formatter lazy-loads Prettier standalone with the PostCSS parser plugin to parse and format stylesheets. Minification validates CSS with the same parser first, then removes comments and extra whitespace. Everything runs locally — CSS is never sent to a server.
When to use it
Formatting helps inspect copied stylesheet fragments, component styles, theme tokens and CSS from DevTools before review. Minification is useful for compactly pasting small styles into tests, embeds or config drafts.
How to use it
- 1Paste CSS into the editor.
- 2Click Format for readable indentation or Minify for compact output.
- 3If the parser cannot read the stylesheet, fix the issue shown in the result area.
- 4Copy the result or clear the fields.
Questions
Is CSS sent to a server?
No. Formatting and minification run in your browser, so the stylesheet stays on your device.
Does it show syntax errors?
Yes. The tool uses Prettier's CSS parser and shows the line, column and parser message when a location is available.
Can minification change CSS meaning?
Minification removes comments and extra whitespace after a successful parse. Still run production styles through your own pipeline when it handles autoprefixing or advanced optimizations.