{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

{{ badge.label }} {{ badge.value }}
Paste, drop, or browse one stylesheet up to 100,000 Unicode characters. Formatting runs locally.
{{ sourceMeta }}
{{ sourceActionHint }}
{{ workflowFeedback }}
Use the indentation expected by the destination codebase.
Same line is the neutral default used by the initial artifact.
Off is neutral. Turn it on to add one blank line after each top-level block.
{{ separate_rules ? 'Enabled' : 'Disabled' }}
{{ computation.values.formatted_css }}
SignalValueMeaningCopy
{{ row.label }}{{ row.display }}{{ row.detail }}

The chart renderer is unavailable. Exact byte counts remain available in Source audit.

CSS Minifier Minify CSS locally with conservative rewrite profiles and byte-savings metrics, while preserving protected comments and flagging release risks.
SCSS to CSS Compiler Compile a self-contained stylesheet locally as SCSS, indented Sass, or CSS and review output with LibSass compatibility warnings.
CSS Flexbox Generator Build Flexbox container and optional child-sizing CSS with axis-aware alignment, wrapping warnings, plus a live preview and starter HTML.
CSS Grid Generator Build responsive or fixed CSS Grid rules with auto-fit and auto-fill options, fit estimates, plus narrow-container safeguards and starter HTML.

A stylesheet can be valid and still be difficult to review. Minification removes most spacing and line breaks, while hurried edits often leave selectors, declarations, comments, and nested blocks aligned in several different ways. Consistent layout makes the boundaries visible without changing the job the CSS is meant to do.

Readable CSS matters most when someone must compare a change, trace a cascade problem, inspect a media query, or hand a stylesheet to another team. Indentation shows block depth. Brace placement makes rule boundaries easier to scan. Blank lines between top-level rules can separate related sections without adding meaning to the stylesheet.

Structure What formatting reveals What still needs checking
Style rule The selector and the declarations controlled by its braces. Whether the selector matches the intended elements and loses or wins in the cascade.
At-rule The scope of media queries, supports conditions, keyframes, and other at-keywords. Whether the condition and browser support fit the target environment.
Nested block How deeply a modern nested rule sits inside its parent. Whether the nesting syntax is supported by the browsers or build process in use.
Comment or string Protected text remains visually separate from structural punctuation. Whether a comment is current and a quoted value has the intended content.

Formatting is not CSS validation. Balanced braces, brackets, parentheses, comments, and strings are useful structural checks, but a tidy result can still contain an unknown property, an invalid selector, an unsupported feature, or a value that produces the wrong layout. Review the formatted text and test important changes in the target browser.

Whitespace also deserves care. It is often cosmetic around punctuation, yet spaces can separate selector tokens and value tokens. A formatter should therefore preserve strings, comments, escapes, and token order while changing only the layout it understands.

How to Use This Tool:

Choose the house style first, then use the structural audit to decide whether the result is ready for browser testing.

  1. Paste or load the stylesheet into CSS source. Keep the source at or below 100,000 Unicode characters.
  2. Select two spaces, four spaces, or tabs under Indentation, then choose same-line or next-line Opening braces.
  3. Turn on Separate top-level rules only when a blank line between outer blocks matches the destination codebase.
  4. Correct the first reported structural error. An unclosed comment, string, brace, bracket, or parenthesis prevents a formatted result.
  5. Read Formatted CSS alongside the rule, declaration, comment, nesting, and byte counts. Test the copied result in the site rather than treating a successful format as browser validation.

Interpreting Results:

A ready result means the bounded structural scan succeeded and the selected layout rules were applied. If the output line count changes sharply, check nested blocks, comments, and long selector or value lists before replacing the original stylesheet.

  • Source audit counts style rules, at-rules, declarations, comments, and maximum brace depth. The counts describe the scanned structure; they do not judge selector quality or property support.
  • Byte profile compares UTF-8 source and output size. Added whitespace commonly makes readable CSS larger, which is separate from the size of a production-minified asset.
  • A result marked unchanged already matches the chosen layout. It still needs the same browser and project checks as any other stylesheet.

Technical Details:

CSS formatting begins with a token-aware structural scan. Quoted strings, block comments, escape sequences, parentheses, and brackets are separated from braces and declaration punctuation so characters inside protected text are not mistaken for rule boundaries.

Transformation Core:

Stage Transformation Boundary
Normalize text Windows and classic Mac line endings become line feeds before scanning. The formatted artifact ends with one line feed.
Token scan Whitespace, strings, comments, escapes, punctuation, and structural delimiters are identified without applying the stylesheet. Unterminated protected text and unmatched delimiters stop the transform.
Layout Structural braces and semicolons create lines; declarations receive readable colon spacing; nesting receives the selected indentation. Opening-brace and top-level spacing choices affect presentation only.
Audit The original token stream supplies rule, at-rule, declaration, comment, depth, character, line, and UTF-8 byte counts. Counts are structural evidence, not full standards conformance.

Validation Limits:

The scan requires balanced braces, parentheses, and brackets and closed strings and block comments. It does not run the CSS cascade, load referenced assets, evaluate media conditions, check every property grammar, or compare rendered pixels. The output is capped at 400,000 Unicode characters, so an unusually expansive result is rejected rather than returned partially.

Audit counts follow the formatter's structural rules. A block whose prelude begins with an at-keyword is counted as an at-rule rather than a style rule, and declaration colons are counted only inside structural blocks.

References: