Hunt
Skip to content

CSS Formatter

Paste CSS, SCSS or Less to format it with Prettier: one declaration per line, consistent spacing, lowercase hex colours and tidy nesting. Minified stylesheets become readable again. The language is detected automatically, and nothing is uploaded.

Runs in your browser

Stylesheet

Paste a stylesheet or press Sample

Formatted

Formatted CSS will appear here

What formatting changes

Formatting changes the layout of a stylesheet, never what it does. Each rule and declaration goes on its own line, indentation follows nesting, spaces are normalised around :, , and {, a missing final semicolon is added, hex colours are lowercased and leading zeros are added to decimals (.5 becomes 0.5). Comments are kept.

How to use the CSS Formatter

  1. Paste a stylesheet, or press Sample.
  2. Check the detected language, or choose CSS, SCSS or Less.
  3. Set the line width and indentation to match your project.
  4. Copy the result or download it.

Examples

Minified CSS

Input
.card{display:flex;gap:1rem;padding:8px 16px}.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}@media (max-width:600px){.card{flex-direction:column}}
Output
.card {
  display: flex;
  gap: 1rem;
  padding: 8px 16px;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

.15 becomes 0.15, and the rule inside the media query is indented.

SCSS with nesting

Input
$primary:#2563eb;.btn{color:$primary;&:hover{color:darken($primary,10%)}.icon{margin-right:4px}}
Output
$primary: #2563eb;
.btn {
  color: $primary;
  &:hover {
    color: darken($primary, 10%);
  }
  .icon {
    margin-right: 4px;
  }
}

$primary shows this is SCSS, so it's detected automatically.

Less variables

Input
@gap:8px;.list{margin:0;.item{padding:@gap (@gap*2)}}
Output
@gap: 8px;
.list {
  margin: 0;
  .item {
    padding: @gap (@gap*2);
  }
}

CSS, SCSS or Less

Detect looks for syntax only a preprocessor uses: $variables, @mixin, @include and #{} mean SCSS; @variables and .mixin(); calls mean Less. Anything else is formatted as CSS, including native CSS nesting. Choose the language yourself if detection guesses wrong.

Options

Language
Detect, or CSS, SCSS or Less.
Line width
Long selectors lists and values wrap to stay within it: 80 (the default), 100 or 120.
Indent
2 spaces (the default), 4 spaces or tabs.
Single quotes
Use single quotes in strings and url() values where possible.

Limitations

  • The indented Sass syntax (.sass files, without braces) isn't supported; SCSS is.
  • Formatting doesn't reorder properties, remove duplicates or minify.
  • Invalid CSS that the parser can't read is reported, not repaired.

Frequently asked questions

Is my CSS uploaded?

No. Prettier runs in a background thread in your browser; nothing you paste is sent anywhere.

Can I unminify CSS from a website?

Yes. Paste the minified CSS and it's laid out one declaration per line. Variable names and comments that were removed by minifying can't be restored.

Does it support CSS nesting?

Yes. Native CSS nesting (&:hover inside a rule) is formatted like SCSS nesting.