CSS Formatter

What is a CSS Formatter?

A CSS Formatter is a developer tool that tidies up Cascading Style Sheet (CSS) files. It handles nesting levels, selectors grouping, media queries, property-value spacing, and brace alignments to make CSS code highly organized and maintainable.

Features

• Custom Indentation: Pretty print using 2 spaces, 4 spaces, or Tab indents.
• Brace Placement: Position open braces ({) on the same line (JS/CSS standard) or on a new line (Allman style).
• Declaration Styles: Choose between Multi-line properties (best for readability) or Single-line rules (best for compactness).
• Colon Spacing: Toggle a space before/after colons (e.g. margin: 10px vs margin:10px).
• Rule Separation: Insert empty lines between rules to distinguish code sections visually.

Example Input

body{margin:0;padding:0;background-color:#fff;color:#333}h1,h2,h3{font-family:'Geist',sans-serif;margin-bottom:1rem}.btn{display:inline-block;padding:0.5rem 1rem;border-radius:4px}

Example Output

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
}

h1, h2, h3 {
  font-family: 'Geist', sans-serif;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}