✨

CSS Beautifier

Format and pretty-print minified or messy CSS with proper indentation, line breaks, and consistent spacing.

Input CSS
Formatted CSS

About CSS Beautifier

CSS Beautifier reformats compressed or poorly written CSS into a consistent, readable style. Each selector gets its own line, each property is indented, and braces are placed consistently. This makes it much easier to review, debug, or edit CSS that came from a minifier or code generator.

Features

  • Consistent formatting - Each rule block is clearly separated with blank lines.
  • Configurable indent - Choose 2 spaces, 4 spaces, or tab indentation.
  • Multi-selector support - Selectors separated by commas are each placed on their own line.

How to Use

  1. Paste your CSS (minified or messy) into the input area.
  2. Click Beautify - the formatted CSS appears in the output panel.
  3. Adjust indentation style (2 spaces, 4 spaces, or tabs) as needed.
  4. Click Copy to copy the formatted CSS to your clipboard.

How It Works

The tool parses CSS tokens (selectors, properties, values, brackets) and re-formats them with consistent indentation, newlines between rules, and proper spacing around colons and semicolons. Comments are preserved.

Example

Input: .btn{display:flex;align-items:center;padding:0.5rem 1rem;background:#6366f1;color:#fff}
Output: properly indented block with each property on its own line.

FAQ

No. Beautifying only adds whitespace and newlines. It does not alter any values, selectors, or properties, so the output CSS is functionally identical to the input.
No. All formatting runs in your browser. Your CSS is never transmitted to any server.