✨ CSS Formatter

Input
Output

Beautify messy CSS to make it readable, or minify it to shrink file size. Choose your preferred indent style (2 spaces, 4 spaces, or tabs) and whether the opening brace stays on the same line. Useful for reading someone else's minified CSS, or for shrinking a stylesheet's size before shipping it to production.

How to use

  1. Paste the CSS you want to format or minify into the input box.
  2. Choose your indent width and brace placement style.
  3. Click "Beautify" or "Minify" to see the result on the right.
  4. Click "Copy" to copy the result to your clipboard.

FAQ

Does it support SCSS or LESS?

It's designed for standard CSS syntax. SCSS/LESS-specific nesting may not format correctly.

How much smaller does minifying make my file?

It strips comments and extra whitespace/line breaks. The exact reduction depends on your original code, but 10-30% is typical.

Can I make someone else's minified CSS readable again?

Yes — paste a single-line minified stylesheet and click "Beautify" to get an indented, readable layout.

Is my CSS sent to a server?

No, formatting and minifying happen entirely in your browser, with nothing sent externally.

Should I use tabs or spaces for indentation?

Match whatever convention your team or project already uses. If there's no house style, 2 spaces is a common default.