CSS Formatter

1. Paste a stylesheet, drop a .css file, or choose Load example. Minified CSS is expanded as soon as you paste it.
2. Set Tab width and Print width in Settings to match your codebase; turn on Single quotes if your project prefers them.
3. Copy with ⌥/Alt C or download with ⌘/Ctrl S. Switch to Minify to compress the result, or use Switch to SCSS for Sass files.

#Unminify a component stylesheet

Minified CSS, typical of a build output, formatted with the defaults.

.card{display:flex;gap:8px;padding:16px;border:1px solid #e7e5e4;border-radius:8px}.card:hover{border-color:#4f46e5}@media (max-width:768px){.card{flex-direction:column;padding:12px}}

Result:

.card {
  display: flex;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
}
.card:hover {
  border-color: #4f46e5;
}
@media (max-width: 768px) {
  .card {
    flex-direction: column;
    padding: 12px;
  }
}

#Custom properties and a multi-value shorthand

Media query spacing is normalized, and a font shorthand with a comma-separated family list is broken onto indented lines.

:root{--bg:#fafaf9;--fg:#1c1917}@media (prefers-color-scheme:dark){:root{--bg:#0c0a09;--fg:#f5f5f4}}body{background:var(--bg);color:var(--fg);font:14px/1.5 Inter,system-ui,sans-serif}

Result:

:root {
  --bg: #fafaf9;
  --fg: #1c1917;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09;
    --fg: #f5f5f4;
  }
}
body {
  background: var(--bg);
  color: var(--fg);
  font:
    14px/1.5 Inter,
    system-ui,
    sans-serif;
}

#Single quotes and number normalization

With Single quotes on, strings, url() arguments and attribute selectors switch quote style. Note .2s becoming 0.2s, while the keyword RED keeps its case.

@import url("theme.css");
.icon::before{content:"\2192";font-family:"Material Icons"}
a[href^="http"]{color:RED;transition:color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out}

Result:

@import url('theme.css');
.icon::before {
  content: '\2192';
  font-family: 'Material Icons';
}
a[href^='http'] {
  color: RED;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

• Print width — the line length (80, 100 or 120) Prettier aims for before breaking long selector lists and comma-separated values across lines.
• Tab width — spaces per indentation level inside rules and at-rules, 2 or 4.
• Single quotes — prints quoted strings, url() arguments and attribute selector values with single quotes instead of double.

#"CssSyntaxError: Unclosed block"

A rule opened with { never closes. The error points at the rule that is still open, which is usually above the real mistake. Add the missing } at the end of that rule.

#"CssSyntaxError: Unexpected }"

There is one closing brace too many — often left behind after deleting a rule or a media query. Go to the reported line and column with F8 and remove the extra }. The hint reads "There is a } without a matching {." and the column points at the stray brace itself.

#Sass or Less syntax

Nesting with &, $variables and @include may format here because the CSS parser is lenient, but mixins, maps and Less guards are better handled by the SCSS Formatter. Minify mode requires plain CSS and rejects Sass syntax.

#Utility-framework directives

At-rules such as @tailwind and @apply are formatted as ordinary at-rules and left intact. The page does not compile them; the output is still source CSS.

#How do I unminify CSS?

Paste the minified stylesheet and it is expanded immediately: one selector block per rule, one declaration per line and nested at-rules indented. Comments are kept, although most minifiers have already removed them. The result is easier to search, diff and debug, and you can switch back to Minify when you are done.

#Does the CSS beautifier change how styles apply?

No. Prettier only changes whitespace, quote style, letter case of properties, units and hex colors, and zero-padding of decimals — none of which affect the cascade. It never merges, reorders or removes rules or declarations, so specificity and source order stay the same. Selectors are printed exactly as written.

#What does Minify mode do?

It compresses the stylesheet with CSSO, the same engine as the CSS Minifier, using its defaults: whitespace and comments are removed, values are shortened, and duplicate rules are merged. Comments starting with /*!, used for licenses, are kept. For control over restructuring and comment handling, use the dedicated minifier page.

#Can I format CSS from browser developer tools?

Yes. Rules copied from the Styles or Sources panel paste in as regular CSS. Computed style dumps without selectors are not valid CSS on their own; wrap them in a selector such as .x { … } first. Minified styles from the Sources panel expand the same way as any other minified file.

#Is my stylesheet uploaded?

No. The formatter runs in your browser, in an isolated editor frame that blocks network requests. Files referenced by @import or url() are never fetched, and your CSS is not sent to or stored on a server. Settings are remembered on this device; input is stored only if you turn on "Remember my last input".

Prettier makes CSS consistent without changing what it selects or applies:

• Property names, hex colors and units are lowercased: COLOR:#FFF becomes color: #fff, and 0PX becomes 0px.
• Leading zeros are added to decimals, so .5em becomes 0.5em.
• A space follows every colon, and every declaration ends with a semicolon.
• Runs of blank lines collapse to one; a single blank line between rules is kept.
• Selectors, keyword values such as RED, custom property values and comments are left as you wrote them.

It does not merge rules, remove duplicates or reorder declarations. Those are optimizations, which the CSS Minifier performs with CSSO's restructuring.

Format the markup that uses these styles with the HTML Formatter, work on preprocessor files in the SCSS Formatter, or browse all code tools.