CSS Formatter

CSS Formatter

Paste CSS into Paste or type your CSS, load the Example, or Open a file up to 5 MB (you can also drag it onto the page). Choose your options and click Format Code.

You get one declaration per line, with nested rules and at-rules indented by depth. The result is shown with syntax colours, along with the line count and size before and after. Copy it, or Download it. The download is named after the file you opened.

Everything runs in your browser, and your CSS isn’t uploaded.

Example

A minified stylesheet, the way it looks in a theme’s style.min.css:

.nav{display:flex;gap:1rem}.nav>a+a{border-left:1px solid #DDD}.nav a:hover,.nav a:focus{color:#0A58CA;text-decoration:underline}@media (width>=600px){.nav{gap:2rem}}

Formatted with 2 spaces, with One selector per line, Blank line between rules, Semicolon after the last declaration and Lowercase property names and colours switched on:

.nav {
  display: flex;
  gap: 1rem;
}

.nav > a + a {
  border-left: 1px solid #ddd;
}

.nav a:hover,
.nav a:focus {
  color: #0a58ca;
  text-decoration: underline;
}

@media (width >= 600px) {
  .nav {
    gap: 2rem;
  }
}

If you also switch on Short rules on one line, rules with a single declaration stay compact: .nav > a + a { border-left: 1px solid #ddd; }. That suits utility classes like .hidden { display: none; }, where a three-line rule adds length without adding clarity.

Spaces CSS cares about

Minifiers can remove nearly all the whitespace from a stylesheet, but not all of it. In a selector, a space has a meaning of its own:

• .card.featured matches one element that has both classes. .card .featured matches a .featured element inside a .card.
• a:hover is a link being hovered. a :hover is any hovered element inside a link.

So the formatter only adds spaces where CSS ignores them:

• around the >, + and ~ combinators
• after commas
• after the colon in a declaration
• in media query conditions, so (width>=600px) becomes (width >= 600px)

Before the result is shown, it’s checked against your original to make sure only spacing and line breaks changed.

Comments stay where you put them

A comment after a declaration stays on that declaration’s line. A comment above a rule stays attached to the rule below it, even when blank lines are added between rules:

.btn {
  padding: 4px 8px; /* matches the input height */
  border: 0;
}

/* Remove after the redesign */
.btn-old {
  background: #eee;
}

The blank line goes above the comment, not between the comment and its rule.

What the notes catch

The formatter doesn’t repair or remove anything. Instead, the notes under Worth a look point out problems that browsers deal with silently. Here is what Chrome does with each one:

The unclosed brace is the hardest to spot by eye. Since browsers support CSS nesting, a missing } no longer just breaks the stylesheet. It changes which elements the rules after it apply to:

.card {
  padding: 1rem;

  .title {
    font-weight: 700;
  }

  .footer {
    color: #c00;
  }

Here the closing brace of .card is missing. The browser reads .footer as .card .footer, so footers outside a card lose their colour, and nothing shows an error. In the formatted result, everything after the missing brace is indented one level too deep, so the problem stands out.

Options

Indent with: 2 spaces, 4 spaces or tabs.

One selector per line: a:hover, a:focus is split into two lines before the brace. Long selector lists become easier to scan, and a trailing comma like .a, .b, { is easy to spot. That comma matters: it makes the whole selector list invalid, so the browser skips the entire rule.

Blank line between rules: an empty line before each rule, at every level, including inside @media blocks and nested rules.

Semicolon after the last declaration: CSS doesn’t require it, and minifiers remove it. The problem comes later. Add a line below color: red without adding the semicolon, and the browser reads color: red margin: 5px as one invalid declaration and drops both.

Short rules on one line: a rule with a single declaration is written as .a { color: red; }.

Lowercase property names and colours: COLOR becomes color, and #AABBCC becomes #aabbcc. CSS treats them the same either way, so this only makes the code consistent. Selectors aren’t touched, because class names and IDs are case-sensitive: .Button and .button are different classes. Values of custom properties are left exactly as written.

FAQ

Will formatting change how my CSS works?

No. Only spacing and line breaks change (plus letter case, if you choose to lowercase), and the result is checked against your original before it’s shown.

Does it fix errors?

No, and it doesn’t delete anything either. Empty rules and IE hacks stay until you remove them. The notes tell you what’s wrong, and the decision is yours.

Does it handle CSS nesting?

Yes. Nested rules, and at-rules such as @media, @supports and @layer, are indented by depth.

How do I make it small again?

Use the CSS Minifier.

What about the HTML and JavaScript?

Use the HTML Formatter. It also lays out <style> blocks inside the page. For script files, use the JS Formatter.

Is my CSS uploaded?

No. Formatting happens in your browser, and nothing you paste or open is stored.