CSS Formatter

How the CSS Formatter works

The formatter reads your stylesheet with a CSS tokenizer that understands strings, comments, escape sequences and unquoted url(...) values, so a semicolon or brace inside a data URI or a quoted font name is never mistaken for the end of a rule. The tokens are grouped into rules, at-rules and declarations, including nested at-rules such as @media, @supports, @layer and @container, and native CSS nesting.

Beautify puts each selector of a selector list on its own line (it only splits at top-level commas, not inside :is() or :not()), writes one declaration per line with a trailing semicolon, indents nested blocks and leaves a blank line between rules. Comments are kept. Custom property values (--name) are kept exactly as written.

Minify removes comments (optionally keeping /*! ... */ licence comments), line breaks, indentation and the last semicolon in each block. It is deliberately conservative: it keeps the space in descendant selectors such as a :hover, the spaces around + and - in calc(), and the space before a parenthesis in and (max-width: 600px), because removing them would change the meaning. The status line shows the size before and after, and the bytes saved.

How to use the CSS Formatter

1. Paste your CSS into the input box, open a .css file, or select Load example.
2. Choose Beautify or Minify in Mode. For Beautify, pick the indentation; for Minify, choose whether to keep /*! */ comments.
3. Select Format CSS, or press Ctrl + Enter (Cmd + Enter on a Mac).
4. Copy the result or download it. In Minify mode the status line shows the original size, the new size and the bytes saved.

Example

This minified CSS:

.nav>li+li,.nav a:hover{color:#2447c4;margin:0 auto}@media (max-width:600px){.nav{display:none}}

is beautified with 2-space indentation as:

.nav > li + li,
.nav a:hover {
  color: #2447c4;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .nav {
    display: none;
  }
}

Choosing Minify turns the beautified version back into the original single line.

Common use cases

• Reading a minified stylesheet from a website or a third-party library.
• Cleaning up CSS pasted from several sources so it has consistent indentation before committing it.
• Minifying a small stylesheet for inline use in an email or HTML page without setting up a build tool.
• Reviewing media queries and nested rules that were written on a single line.

Common errors and how to fix them

Invalid CSS at line N

The parser hit something it cannot read, most often an unbalanced brace. Count the braces around the reported line, paying particular attention to nested media queries.

Unterminated comment. Add the closing */

A /* was opened without a matching */, so everything after it is read as comment text and the rest of the stylesheet disappears from the output.

Unterminated url(). Add the closing )

A url() value is missing its closing bracket, often because the path itself contains an unescaped bracket. Wrap the path in quotes.

A rule stopped working after formatting

Formatting changes whitespace only. If behaviour changed, the original probably relied on a missing semicolon or an unclosed block, which is invalid CSS that different parsers recover from differently.

Frequently asked questions