How to use the CSS formatter

1Paste the stylesheet into the CSS box, or press Example.
2Choose Indent and Opening brace (same line or new line). Untick Blank line between rules for a denser layout.
3Tick Sort properties A–Z if you want declarations in alphabetical order inside each rule.
4Press Format CSS, then Copy or Download (formatted.css).

Example

Input

.card{padding:16px;color:#333}.card:hover,.card:focus{color:#000}@media (max-width:600px){.card{padding:8px}}

Output

.card {
  padding: 16px;
  color: #333
}

.card:hover,
.card:focus {
  color: #000
}

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

Each selector in a list gets its own line. Values are not changed, so the last declaration still has no semicolon, exactly as in the input.

Indent and brace style

Rules are written with one declaration per line, indented by 2 spaces, 4 spaces or a tab. Opening brace puts { either after the selector (the most common style) or on a line of its own. Comma-separated selectors go on separate lines, so .a, .b, .c becomes three lines that are easy to scan and to diff.

Comments are kept where they were. Values are left alone: the formatter doesn't shorten colors, add missing semicolons or change units.

Sorting properties

Sort properties A–Z orders the declarations inside each rule alphabetically, ignoring vendor prefixes (-webkit-transition sorts next to transition and stays in front of it). Custom properties (--brand-color) are not moved, because later declarations can depend on them.

Sorting is safe for most stylesheets, but not all: when the same property appears twice, or a shorthand (margin) and a longhand (margin-top) appear in the same rule, the later one wins. Swapping their order changes the result. Check rules like that after sorting.

Media queries and nesting

Rules inside @media, @supports and @layer are indented one more level, which makes it obvious which breakpoint a rule belongs to. Native CSS nesting, now supported in all current browsers, is indented the same way:

.card {
  color: #333;
  &:hover {
    color: #000;
  }
}

SCSS and Less files share most of this syntax and usually format correctly, but the formatter doesn't understand mixins or functions, so unusual constructs may come out with odd spacing.

Formatting vs minifying

Formatting is for people: you read, edit and review the code. Minifying is for browsers: the CSS minifier removes the spaces, comments and line breaks that formatting adds, and shortens values such as #ff0000 to red. Keep the formatted file in your project and let your build step produce the minified one. To turn a downloaded .min.css back into something you can read, format it here.

Is my text private?

This tool runs entirely in your browser. Your text is not uploaded to our servers.

Sources

Questions about the CSS formatter

Does it support CSS nesting?

Yes. Nested rules are indented under their parent, like rules inside a media query.

Will sorting properties change behavior?

Only when a rule sets the same property twice, or mixes a shorthand such as background with a longhand such as background-color. The later declaration wins, so changing the order can change the result.

Can I format SCSS?

Usually, yes: variables, nesting and @include lines are indented normally. The formatter doesn't validate SCSS syntax, so check unusual mixins by eye.

CSS Formatter