CSS Formatter

Before and after

Input (minified):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Output (formatted):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

What the formatter does

What the formatter removes

/* This comment is removed when you format */
.button { background: #2563eb; }

Block comments (/* ... */) are stripped from the output. If you need them, keep a copy of the original file before formatting.

Nested rules (Sass / modern CSS nesting)

The formatter indents nested rules according to their depth:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Sass/Less syntax without & is also tolerated. Sass-specific at-rules such as @mixin, @include and @extend pass through intact but are not reformatted deeply. For full Sass formatting, use a Sass-aware tool like Prettier.

When not to format

• In production: minify, do not format. Formatted CSS is 2-3x larger than minified.
• Before diffing: format both sides. Diffing a minified file against a pretty one produces unreadable diffs.
• Inside a build pipeline: let Prettier or your framework’s formatter handle consistency. Use this tool for one-off cleanup.