CSS Formatter
FormattersBeautify and reformat CSS instantly with Prettier. Handles custom properties, media queries, keyframes, and @supports. Configurable indent. 100% browser-based.
About CSS Formatter
The CSS Formatter is a Prettier-powered, browser-based tool that instantly reformats raw or minified CSS stylesheets into clean, consistently indented output. It handles all modern CSS including custom properties (variables), media queries, keyframe animations, @supports, @layer, and complex selector chains — with configurable indentation and an 80-column print width. All formatting runs in a Web Worker, keeping the UI fully responsive. Your stylesheets never leave the browser.
Features
- ✓Powered by Prettier's postcss parser — the industry-standard CSS formatter
- ✓Full support for CSS custom properties (variables), @layer, @supports
- ✓Handles media queries, @keyframes, @font-face, and pseudo-selectors
- ✓Configurable indentation: 2 spaces, 4 spaces, or tab
- ✓Print width of 80 columns for consistent, readable output
- ✓Web Worker execution — formatting never blocks the UI
- ✓Syntax-highlighted editor for both input and output
- ✓One-click clipboard copy of formatted output
- ✓Real-time byte-savings stats (input vs output size)
- ✓Language picker — instantly switch to SCSS, Less, or 20+ other formatters
- ✓Mobile-responsive layout with a dedicated Format button
- ✓100% client-side — your stylesheets are never uploaded
Common Use Cases
- Reformatting minified CSS received from a CDN or build output before debugging
- Normalising indentation and property ordering across a team's CSS codebase
- Cleaning up auto-generated CSS before committing to source control
- Formatting CSS snippets before pasting into code reviews or documentation
- Debugging complex media query and selector specificity issues in readable format
- Preparing CSS for sharing in Stack Overflow answers or pull request comments
Frequently Asked Questions
QWhich formatter powers this tool?
Prettier's postcss parser — the same parser used by VSCode's CSS formatter, Stylelint, and most popular IDE extensions.
QDoes it support all CSS3 features?
Yes — Prettier's postcss parser handles all standard CSS3 including custom properties, calc(), nesting (CSS Level 4), @layer, @supports, @keyframes, and modern pseudo-selectors.
QIs my CSS sent to a server?
No. All formatting runs locally in a dedicated Web Worker inside your browser. Your stylesheets never leave your device.
QWhat is the difference between the CSS, SCSS, and Less formatters?
All three use Prettier's postcss parser but with their respective language parsers (css, scss, less). The CSS formatter handles standard stylesheets; SCSS adds nesting and Sass-specific syntax; Less adds Less-specific variables, mixins, and directives.