CSS Formatter & Beautifier

A CSS formatter (beautifier) transforms minified or messy CSS into readable, properly indented code. Rules: each selector gets its own line, opening brace on the same line, each declaration on a new line with consistent indentation (2 or 4 spaces), closing brace on its own line. Minification reverses this: removes whitespace, comments, and trailing semicolons. body { margin: 0; } minifies to body{margin:0}.

Format and beautify minified or messy CSS code. Choose 2-space, 4-space, or tab indentation. Also minifies CSS by removing whitespace, comments, and unnecessary characters. Shows rule count, declaration count, and size statistics. Presets for minified, messy, flexbox, and CSS variable code.

Works OfflineDark ModeNo Ads

Presets

Options

Mode:

Indent:

Input CSS

Formatted CSS

body {
  margin:0;
  padding:0;
  font-family:sans-serif
}

h1 {
  color:#333;
  font-size:2rem;
  margin-bottom:1rem
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem
}

@media(max-width:768px) {
  .container {
    padding:0 .5rem
  }

  h1 {
    font-size:1.5rem
  }

}

Statistics

Rules

Declarations

224

Input chars

292

Output (30% expanded)

How to Use

1
Paste your CSS
Paste minified, messy, or unformatted CSS in the input panel. Or click a preset (Minified, Messy, Flexbox, CSS Variables) to load sample code.
2
Choose format or minify mode
Select Format/Beautify to expand and indent, or Minify to compress. For formatting, pick your indent style: 2 spaces, 4 spaces, or tab.
3
View the output
The formatted or minified CSS appears in the output panel. Statistics show rule count, declaration count, and size comparison.
4
Copy the result
Click Copy to copy the output to your clipboard. Paste into your stylesheet or build pipeline.