CSS formatter — turn minified or messy CSS into readable rules

How to use the CSS formatter

1. Paste your stylesheet into the Input box. A short sample is already there.
2. Choose the Indent: 2 spaces, 4 spaces or Tab.
3. Read the result under Formatted CSS. It updates as you edit.
4. Copy it, or download it as styles.css.

What it does and when to use it

Minified CSS from a CDN, a theme or a browser’s “copy styles” menu is one long line that is hard to read. This tool rebuilds it as one rule block per selector and one declaration per line, with a blank line kept between rules where you had one. Use it to read a third-party stylesheet or clean up CSS that several people edited by hand.

When the CSS is ready to ship, the CSS minifier does the opposite job. For files that mix languages, the code beautifier handles CSS, HTML, JavaScript and more from one page, and the SQL formatter tidies queries in the same way.

How it works

The tool loads Prettier’s standalone build and its PostCSS plugin into the page and parses your CSS into a tree of rules, at-rules and declarations. Prettier then prints that tree again with your indent, a line width of 80 characters and its own fixed style rules:

• one selector per line in a selector list, followed by {
• a space after each colon and a semicolon after every declaration
• nested blocks, such as rules inside @media, indented one level
• runs of empty lines between rules reduced to one

Broken input is reported, not guessed. Your CSS is never uploaded; Prettier runs on your device.

Worked examples

These are the tool’s own outputs.

A minified button style. The input .btn{color:#fff;background:#0b1220}.btn:hover,.btn:focus{opacity:.9} becomes:

.btn {
  color: #fff;
  background: #0b1220;
}
.btn:hover,
.btn:focus {
  opacity: 0.9;
}

The selector list is split across two lines and .9 gains its leading zero.

A media query with 4-space indent. @media (min-width:768px){.card{padding:24px}} with Indent set to 4 spaces gives:

@media (min-width: 768px) {
    .card {
        padding: 24px;
    }
}

A missing brace. a{color:red returns CssSyntaxError: Unclosed block (1:1), pointing at the rule that never closes.

Limits and tips

• Prettier’s style is fixed. Apart from the indent, you cannot change where lines break or how values are spaced.
• Some text changes case. Property names and hex colours become lower case (COLOR:#FFF turns into color: #fff). Selectors keep their case.
• It does not check your CSS. Unknown properties and invalid values pass through; only syntax errors such as an unclosed block stop it.
• Use the matching parser for preprocessors. Nested rules and // comments format fine here, but LESS mixin calls do not, and Sass-only rules are not guaranteed. Pick the SCSS/LESS formatter for .scss and .less files.