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.

Tools that pair well with the 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.
• Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
• Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.