CSS Formatter & Beautifier

What does a CSS formatter do?

A CSS formatter takes stylesheet code in any shape — minified onto one line, inconsistently indented, or copied from browser DevTools — and rewrites it with a predictable layout: the selector, an opening brace, one property: value; declaration per line, and the closing brace on its own line. Rules inside @media, @supports and @container blocks get an extra level of indentation so the structure is obvious.

Formatting is the first step when you need to debug a third-party theme, review CSS in a pull request or learn from another site’s styles. The formatter is powered by js-beautify and runs entirely in your browser.

Before and after

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

becomes

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Note that the formatter does not add or remove semicolons, reorder properties or change values — it only changes whitespace, so the result behaves exactly like the input.

SCSS, Less and modern CSS

Nested rules, & parent selectors, variables ($brand, @brand), mixins and native CSS nesting are all indented correctly. Custom properties (--brand: #4f46e5), clamp(), :is()/:where() and cascade layers (@layer) pass through untouched.

Style conventions worth adopting

• Two-space indentation is the de-facto standard in most CSS style guides and the Prettier default.
• One selector per line in grouped selectors makes diffs smaller when you add or remove a selector.
• A blank line between rules improves scanning in long files.
• Keep formatting automatic: run Prettier or Stylelint in your editor and CI so formatting never shows up in code review.

Shipping to production? Use the CSS Minifier to see exactly how many bytes you save, or tick Minify above. To convert pixel values while you are at it, try the PX to REM converter.

También se busca como: css beautifier, css prettifier, format css, pretty print css, unminify css, css indent, scss formatter, less formatter.

Herramientas que combinan con: CSS Formatter

• HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
• JavaScript Formatter — Unminify and pretty-print JavaScript, JSON or JSX with your preferred indentation and brace style — or strip whitespace and comments with a verified minifier.
• Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
• Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.