CSS Formatter

Format and beautify CSS

About CSS Formatter

CSS Formatter expands or minifies CSS entirely in your browser using simple pattern-based rules — breaking lines at braces and semicolons for formatting, or stripping whitespace for minifying — rather than a full CSS parser. It is string-aware, though: quoted values are scanned separately from the surrounding code, so a content declaration containing a semicolon, brace, or repeated spaces (e.g. content: 'a;b') is copied through untouched instead of having its whitespace or punctuation altered.

How to use CSS Formatter

  1. 1Paste your CSS into the input box.
  2. 2Click 'Format' to expand it with line breaks and indentation, or 'Minify' to compress it.
  3. 3Review the result in the output box.
  4. 4Click 'Copy' to copy it to your clipboard.

Frequently Asked Questions

Is CSS Formatter free to use?

Yes, it's completely free with no signup required.

Can I format minified CSS?

Yes — pasting compressed CSS and clicking 'Format' expands it with line breaks and indentation.

Does it support all CSS syntax, including variables and modern features?

It works on the raw text regardless of what CSS features you use, since it's based on whitespace and punctuation patterns rather than parsing CSS semantics — but quoted string values are still recognized and left untouched, so content declarations format and minify safely.

Is my code uploaded to a server?

No, formatting and minifying both happen entirely in your browser.

Tips & Tricks

  • Quoted content values containing semicolons, braces, or repeated spaces (e.g. content: "a;b") are scanned as strings and left untouched by both Format and Minify.
  • There's no indentation or style customization — both Format and Minify use one fixed style each.
  • Minify strips comments, whitespace, and space around punctuation; Format does the reverse, adding line breaks and 2-space indentation.
  • For everyday CSS without unusual string content, both operations work reliably and reversibly.