How to use the CSS formatter

Choose the syntax: plain CSS, SCSS or Less.
Paste a stylesheet, even a minified one, into the left box. The formatted version appears on the right.
Adjust the indent and line width if your project uses a different style.
Press Copy to copy the formatted stylesheet.

Example

This compressed rule set:

.card{display:flex;gap:8px;padding:16px}.card:hover,.card:focus-within{box-shadow:0 2px 8px rgba(0,0,0,.2)}

is expanded to one declaration per line, with each selector of a list on its own line:

.card {
  display: flex;
  gap: 8px;
  padding: 16px;
}
.card:hover,
.card:focus-within {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

Note the small clean-ups: spaces after commas and a leading zero on .2. The formatter isPrettier with its PostCSS parser, running entirely in your browser; your stylesheet is never uploaded.

Frequently asked questions

Can it format SCSS and Less?

Yes. Switch to SCSS for Sass variables, nesting, mixins and @use, or toLess for @variables and mixin calls. Plain CSS nesting is accepted in every mode.

Can I un-minify a CSS file?

Yes. Paste the minified file and every rule and declaration is put back on its own line. Comments that survived minification are kept, but the original indentation and blank lines cannot be recovered.

Does it change my values?

Only their spelling, never their meaning: Prettier lowercases hex colours and units where safe, adds leading zeros and normalises spacing. Property order and selectors stay exactly as you wrote them.