CSS Formatter & Beautifier

Minified CSS ships faster but becomes unreadable the moment something breaks. A production stylesheet compiled from Sass or PostCSS can land as a single 80 KB line with no whitespace at all. CSS Formatter & Beautifier restores the structure in one paste. Each rule gets its own line, each property is indented consistently, so the declaration that is overriding your layout is actually findable.

Minify mode runs the reverse trip, removing comments, collapsing whitespace, stripping the last semicolons before closing braces, and shrinking space around punctuation. The character saving counter in the output header shows the exact byte reduction so you can decide whether the pass is worth a build step.

Worked Example: Expanding a Minified Hero Component

Click Load Sample to paste a minified stylesheet containing a .hero block, nested selectors for the heading and paragraph, and a @media query. With 2 spaces indent and Beautify active, the formatter expands the flat string into a properly indented file — the media-query contents sit at two levels of nesting so it is immediately clear which rules apply only on narrow viewports.

• Switch to 4 spaces or Tab without re-pasting. The output refreshes on each selector click. Tab indent is preferred when the CSS will be committed alongside languages like Python or Go where tabs carry semantic weight and editors normalise their display width per-project.
• Switch to Minify on the same sample. The output collapses to a single line with all comments stripped. The stats bar shows the original size, the minified size, and the bytes saved.
• String values inside content: properties andurl() functions are preserved intact — quotes and spaces inside them are never touched. This is the non-obvious difference that causes naive formatters to break SVG data URIs.

Options: What Beautify Preserves and What Minify Strips

• Beautify preserves: all property values, all selector strings, all @media / @keyframes / @supports at-rules, and all block comments. Every comment is placed on its own line at the correct indent level.
• Beautify rewrites: leading whitespace, spacing around { and }, and the line break after every property declaration. The output is deterministic for any given input and indent choice.
• Minify strips: all block comments (/* */), all whitespace runs, spaces around : ; { } and,, and the trailing semicolon before each closing brace.

How Big a Stylesheet This Can Handle

• Inputs up to 500,000 characters are accepted. Larger inputs are rejected before processing with the message Input exceeds 500,000-character limit. A typical compiled Tailwind CSS production build is around 10–30 KB — well inside the ceiling.
• Malformed CSS (unclosed braces, mismatched quotes) may produce mis-indented output rather than an error. The formatter shows Could not parse the CSS — check for unclosed braces or malformed rules. only when the tokeniser throws outright.
• All processing runs locally. No CSS is sent to any server.