CSS Formatter

1. Paste your CSS into the input box on the left, or click Sample.
2. Pick your preferred indentation.
3. Click Format to beautify the CSS with Prettier, or Minify to strip every byte of whitespace for production use.
4. Copy the result and paste it into your stylesheet.

This formatter uses Prettier's PostCSS parser, which handles plain CSS as well as SCSS and Less syntax. It re-emits the input with consistent indentation, normalized spacing around selectors and braces, and one declaration per line. The minify mode strips comments, whitespace, and trailing semicolons to produce the smallest valid CSS string — typically 20–40% smaller than the original.

CSS (Cascading Style Sheets) is the language used to describe the presentation of HTML documents. As stylesheets grow, they tend to accumulate inconsistent indentation, mixed quote styles, dead whitespace, and forgotten comments. A CSS formatter (or beautifier) re-emits the stylesheet with a single consistent style, making it easier to read and review. A CSS minifier does the opposite: it strips every non-essential byte to minimize transfer size over the network.

Production websites should ship minified CSS to reduce page load time, while developers should work with formatted CSS for readability. This tool lets you do both in one place: format during development, minify before deploying.

Yes. Prettier's PostCSS parser handles SCSS and Less syntax including nesting, variables, mixins, and partials. Plain CSS, of course, works perfectly too. Note that the minifier is a simple whitespace stripper — it does not perform advanced optimizations like merging duplicate selectors or shorthand conversion. For that, use a dedicated CSS optimizer like clean-css or lightningcss.

No. Prettier only changes whitespace, quotes, and ordering within selectors — it never reorders rules, never changes property values, and never removes declarations. The minify mode is more aggressive: it strips comments and the final semicolon in each rule, but it never removes rules or properties. Both modes produce CSS that behaves identically to the input.

No. Everything runs in your browser. Your CSS never leaves your device.