CSS Beautifier

Pretty print first. Argue about style later.

Minified CSS wins on the wire. In a code review, one unbroken line hides every typo. A CSS beautifier restores the shape reviewers expect: selector, opening brace, one property per line, closing brace. Nothing more.

Paste production CSS from DevTools, a CDN bundle, or a teammate who never hit Format on Save. Choose 2-space or 4-space indent. Hit Beautify. The editor rewrites whitespace. Selectors stay untouched.

What a before and after looks like

Take a compressed rule pulled from a live site on 12 March 2025:

.card{display:flex;gap:1rem;padding:16px;border-radius:8px;background:#0f172a;color:#f8fafc}.card h2{margin:0;font-size:1.25rem}

After beautify with a 2-space indent:

.card {display: flex;gap: 1rem;padding: 16px;border-radius: 8px;background: #0f172a;color: #f8fafc;}
.card h2 {margin: 0;font-size: 1.25rem;}

Same cascade. Same specificity. Only the whitespace changed. You now see the gap token, the dark surface, the heading size without scrolling sideways.

Who opens this page mid-week

A designer copies computed styles from Chrome, dumps them into a ticket, and asks why the card padding differs on mobile. You beautify the dump, notice padding: 16px next to a media query that never overrides it, and reply with one line instead of a screenshot tour.

A contractor inherits a legacy theme.css with no source map. The file is 180 KB of concatenated rules. Beautify a suspicious region, search for the broken class, leave the rest alone. You do not need a full project format for a three-line fix.

A support engineer pastes CSS from an email where Outlook stripped the line breaks. The sheet still parses. Human eyes do not. Two clicks restore the structure.

How the formatter rewrites your paste

The page loads js-beautify in the browser. On Beautify, the library walks tokens, inserts newlines at braces and semicolons, then pads nested blocks to your chosen indent width. Block comments stay. Extra blank lines collapse to a short maximum so the file does not balloon.

At-rules such as @media, @supports, and @keyframes keep their nesting. Declarations inside those blocks indent one level deeper than the outer rule. Property order never shuffles. You still own the cascade order you pasted.

Minify on this page takes the opposite path. Comments drop. Runs of whitespace collapse. Braces and commas lose surrounding spaces. Use minify when you need a quick size check before shipping. For production pipelines, prefer a dedicated CSS Minifier with the compression mode your build expects.

All of this stays on your machine. The Ace editor never posts the stylesheet to a server. Close the tab and the paste is gone.

Editor formatters vs this browser pass

VS Code with Prettier, Stylelint --fix, or the built-in CSS language service formats on save against your repo config. Those tools win for daily edits. They lose when the CSS never lived in the repo: a CDN file, a CMS customizer field, a client paste in Slack, a production-only override with no source map.

This page fills that gap. No workspace. No npm install. No fight with someone else's .prettierrc. Paste, pick 2 or 4 spaces, beautify, copy. When the work returns to a real codebase, switch back to the project formatter so the next commit matches house style.

When beautify is the wrong next step

• Preprocessor source. Nested SCSS or LESS belongs in the SCSS Beautifier or LESS Beautifier. Plain CSS formatters misread nesting and mixins.
• Commit-ready house style. Teams on Prettier, Stylelint, or EditorConfig should format in the editor or CI. A browser pass is fine for one-off review, poor for drift across a monorepo.
• Shipping the result as-is. Beautified files cost more bytes than minified ones. Format for humans. Minify for the network.
• Huge vendor dumps. Multi-megabyte bundles freeze the tab. Split the sheet, or run a local CLI on a machine with headroom.
• Sorting or renaming. Nothing here alphabetizes properties, expands shorthands, or rewrites class names. Bring a linter or refactor tool for those jobs.

Mistakes we keep seeing in review

1. Beautifying, then committing without reading. Whitespace diffs bury a real selector change.
2. Assuming neat indent means the cascade is correct. Specificity wars survive pretty-print.
3. Pasting SCSS with $variables into a CSS-only formatter, then wondering why the output looks wrong.
4. Leaving vendor prefixes or !important flags alone because the layout looks tidy. Tidy is not audited.
5. Beautifying an entire 8,000-line theme to change one button color. Scope the paste to the rule you care about.

We recommend beautify for read-only triage: understand a dump, spot a typo, prepare a smaller patch. Keep automated formatters in the repo for the long haul.