CSS Formatter

Beautify or minify CSS stylesheets with syntax highlighting and size savings stats.

BeautifyMinifyFormat
Indent
Beautify mode
Minify mode
Input CSS
855 chars
Output CSSBeautified
1045 chars
Input: 855 charsOutput: 1,045 chars

All formatting happens locally — your code never leaves your browser.

CSS Formatter has two modes. Beautify expands a stylesheet so every rule opens on its own line, each declaration sits on a separate indented line, and selector lists are split one selector per line. Minify does the opposite: it strips comments and collapses whitespace to produce a single compact line.

Both modes use a small tokenizer that understands strings, comments and parentheses, so a semicolon inside url("data:...;base64,...") or a quoted content value is never treated as the end of a declaration. Beautify keeps comments, nests @media blocks, puts one space after each property colon and ends every declaration with a semicolon. It does not reorder properties or validate values.

Minify removes comments and the whitespace around { } ; , > and ~, and drops the final semicolon in each block. Whitespace that carries meaning is kept: the spaces around + and - inside calc(), the space in a descendant selector such as "nav a :hover", and everything inside quoted strings. It does not rename, merge or shorten values, so keep your beautified source as the file you edit.

Everything runs in the browser. For CSS embedded in a page, tidy the markup with the HTML formatter, and use the color picker when you need to convert the hex, RGB or HSL values you find along the way.

  1. Paste your stylesheet into the Input CSS editor.
  2. For readable output, pick 2 or 4 spaces with the Indent buttons and click Beautify.
  3. For compact output, click Minify; the stats bar under the output shows the input size, output size and characters saved.
  4. Review the result in the Output CSS editor.
  5. Copy the output with the copy button in the Output CSS header.

  • Beautify with 2- or 4-space indentation, one declaration per line
  • Splits comma-separated selector lists onto separate lines
  • Indents rules nested inside @media and other at-rule blocks
  • Keeps comments when beautifying; removes them when minifying
  • Minify reports characters saved and the percentage reduction
  • CodeMirror editors with CSS syntax highlighting, line numbers and code folding
  • Processes the stylesheet locally in your browser

Beautify a one-line rule set

Input:
.btn,.btn-primary{padding:8px 16px;border-radius:6px}.btn:hover{opacity:.85}

Output:
.btn,
.btn-primary {
  padding: 8px 16px;
  border-radius: 6px;
}

.btn:hover {
  opacity: .85;
}

Selectors are split per line, declarations are indented, and each declaration gets a space after the colon and a closing semicolon.

Beautify a media query

Input:
@media (max-width:640px){.hero h1{font-size:2rem}.hero p{font-size:1rem}}

Output:
@media (max-width:640px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }
}

Rules inside the at-rule get an extra level of indentation.

Minify for production

Input:
/* Buttons */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
}
.btn:hover {
  opacity: 0.85;
}

Output:
.btn{padding:8px 16px;border-radius:6px}.btn:hover{opacity:0.85}

The comment, line breaks and trailing semicolons are removed. Values such as 0.85 are not shortened.

Indentation is off after a certain rule

A brace is unbalanced, so the formatter's depth counter is off from that point.

Find the rule where indentation first goes wrong and check it for a missing or extra { or }.

Comments disappeared

Minify always removes /* */ comments, including license headers.

Use Beautify when you need to keep comments, or add required license comments back after minifying.

Can minifying break my CSS?

It is designed not to. Spaces inside calc(), descendant selectors such as "nav a :hover" and quoted strings are preserved, and only whitespace that has no effect is removed. It does not apply structural optimisations like merging rules, so a bundler-based minifier will usually produce smaller production output; this tool suits quick checks and snippets.

How much smaller will minified CSS be?

It depends on how much indentation and commenting the source has. The stats bar under the output shows the exact before and after character counts and the percentage saved. Minify does not rename, merge or deduplicate rules, so savings come only from whitespace, comments and trailing semicolons.

Does Beautify fix spacing inside declarations?

Partly. Each declaration is written as property, colon, one space, value and a semicolon, so color:red and color : red both become color: red;. Spacing inside the value itself, such as in a font-family list, is collapsed to single spaces but otherwise left as written.

Does it support SCSS or Less?

It is written for plain CSS. Simple nested SCSS blocks will usually be indented because they use braces, but features like // line comments, mixins and interpolation are not understood and may be formatted oddly.

Does the indent setting affect minify?

No. Indent applies only to Beautify; minified output never contains indentation.