CSS Beautifier

About the CSS Beautifier

Minified CSS is great for browsers and hard for people. When you need to read a stylesheet from a live site, debug a theme or pick up someone else's code, the CSS Beautifier turns it back into tidy, indented CSS with one declaration per line.

It puts every rule on its own block, adds a space after each colon, indents rules inside @media, @supports and @keyframes, and can put each selector of a group on its own line. You choose 2 spaces, 4 spaces or tabs, and whether to leave a blank line between rules.

The formatter is forgiving. It also handles SCSS and Less syntax such as nested rules, variables and mixins, and it tells you when a closing brace is missing or extra. Your CSS is formatted in your browser and never leaves your device.

How to use it

1. Add your CSSPaste minified or messy CSS, drop a .css, .scss or .less file onto the box, or use Open file. Sample loads a minified card style.
2. Pick an indentChoose 2 spaces, 4 spaces or tabs to match your project.
3. Set the layout options"Blank line between rules" separates each rule with an empty line. "Each selector on its own line" splits groups like .card .title,.card h2 over several lines.
4. Check the status lineIt says "Formatted" and the number of lines. If braces do not match, it tells you whether a } is missing or one is extra.
5. Copy or downloadCopy the formatted CSS or download it as styles.css.

Key features

Examples

Formatting the sample

The Sample button loads this minified CSS:

.card{color:#333;padding:10px 16px;border:1px solid #ddd}.card .title,.card h2{font-weight:700;margin:0 0 8px}@media (max-width:600px){.card{padding:8px}}

With the default options, the status line reads Formatted · 17 lines:

.card {
  color: #333;
  padding: 10px 16px;
  border: 1px solid #ddd
}

.card .title,
.card h2 {
  font-weight: 700;
  margin: 0 0 8px
}

@media (max-width:600px) {
  .card {
    padding: 8px
  }
}

The last declaration in each rule has no semicolon because the minified source had none. The beautifier changes layout only, never the CSS itself.

What the options do

SCSS with nesting

This SCSS on one line:

.nav{color:red;&:hover{color:blue}.item{margin:0}}$x:1px;@mixin m($a){padding:$a}

is formatted like this:

.nav {
  color: red;

  &:hover {
    color: blue
  }

  .item {
    margin: 0
  }
}

$x: 1px;

@mixin m($a) {
  padding: $a
}

Animations with 4 spaces

With the indent set to 4 spaces and blank lines turned off, this animation:

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

becomes:

@keyframes spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

Each keyframe gets its own block, indented inside the animation. Values such as rotate(0) are left exactly as written.

Finding a missing brace

In .x{color:red .y{margin:0} the first rule is never closed. The output shows .y indented inside .x, and the status line says Formatted, but 1 block is never closed: a } is missing. For .x{color:red}} it says 1 closing brace has no matching {.

Tips

• When you inspect a live site, copy the stylesheet from your browser's developer tools and paste it here to read it comfortably.
• Turn off "Blank line between rules" for long stylesheets. It makes them noticeably shorter while staying readable.
• Watch the indentation. If a rule suddenly sits one level deeper than you expect, a closing brace is probably missing just above it.
• Format both versions of a stylesheet the same way before comparing them in Text Compare. Only real changes will show up.
• When you are done editing, run the CSS through the CSS Minifier again for production.

Common mistakes and limits

• Expecting errors to be fixedThe beautifier reformats what is there. It does not add missing semicolons, braces or values, and invalid declarations stay invalid.
• Expecting lost comments to come backComments removed by a minifier are gone for good. Formatting cannot restore them, or the original variable and class names of a build tool.
• Looking for property sortingDeclarations stay in their original order, because order can matter in CSS. Only spacing and line breaks change.
• Formatting CSS inside HTMLPaste only the CSS. For a full page with <style> blocks, use the HTML Beautifier, which formats the HTML and its inline CSS together.
• Mixing tabs and spaces afterwardIf your project uses tabs, choose Tabs here. Pasting space-indented CSS into a tab-indented file makes later diffs noisy.

Frequently asked questions