DevToolsmith

CSS Formatter

Paste minified or messy CSS, SCSS or Less and get a cleanly formatted stylesheet: one declaration per line, consistent spacing and properly indented media queries. Uses Prettier and runs entirely in your browser.

Runs 100% in your browser — nothing is uploaded

Input
Tip: drop a file here354 chars · 354 bytes · 3 lines
Formatted
456 chars · 456 bytes · 31 lines

Example

Before (minified)
.card{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1rem}.card>h2,.card>p{margin:0}@media (prefers-color-scheme:dark){.card{background:#0f172a;color:#e2e8f0}}
After
.card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}
.card > h2,
.card > p {
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  .card {
    background: #0f172a;
    color: #e2e8f0;
  }
}

What the formatter normalizes

  • One selector per line in selector lists, and one declaration per line.
  • A space after : and ,, and around combinators like > and +.
  • Consistent quotes in strings and url(), double by default.
  • Lowercase hex colors and units, and a leading zero on decimals (.5 becomes 0.5).
  • Blank lines between rules kept, but never more than one.

Format CSS in your project

Shell
npm install --save-dev prettier
npx prettier --write "src/**/*.{css,scss,less}"

Converting colors while you tidy up? The color converter translates between HEX, RGB, HSL and OKLCH, and the contrast checker tests text colors against WCAG.

Frequently asked questions

How do I unminify CSS?

Paste the minified stylesheet, for example from a CDN or a site’s DevTools Sources panel, and the formatter rebuilds it with one declaration per line and nested indentation for @media and @supports blocks. Comments that were removed by the minifier can’t be recovered, but everything else becomes readable.

Does formatting change what the CSS does?

No. Prettier only changes whitespace, line breaks, quote style and letter case of hex colors where it is safe. Selectors, values and the order of rules are untouched, so the cascade works exactly as before.

Is SCSS and Less supported?

Yes. Pick SCSS or Less above. Nesting, variables ($brand, @brand), mixins, @include, @extend and maps are formatted according to each language’s syntax. Indented Sass (.sass files without braces) is not supported.

Why is my CSS reported as invalid?

Usually a missing closing brace or an unclosed comment or string, which makes everything after it part of the same block. The message shows the line and column where the parser gave up; the actual mistake is often a few lines above.

Can I sort properties alphabetically?

Prettier deliberately doesn’t reorder properties. If your team wants a fixed order, use Stylelint with the stylelint-order plugin, which can sort properties alphabetically or by group (positioning, box model, typography) and fix files automatically.