0 chars
Paste minified or messy CSS, pick your indent and spacing options, get clean readable code. Runs entirely in your browser — your code never leaves your device.
The CSS Beautifier takes minified or sloppily-formatted CSS and rewrites it with proper indentation, newlines between rule blocks, and one selector per line where applicable. Paste, adjust options, click Beautify — the formatted result replaces your input.
It runs in your browser using the open-source js-beautify CSS engine. Your CSS never reaches a server — useful when you're working on private stylesheets, client codebases, or anything you'd rather not paste into a remote service.
The tool only touches whitespace and line breaks. It won't reorder rules, change property names, normalize colour formats, or modify specificity — every !important stays exactly where you put it. Purely cosmetic restructuring.
Reading minified production CSS. When you're inspecting a live site and pulling CSS from DevTools, you usually get a single long line. One beautify pass and you can actually see which selectors do what.
Cleaning up framework output. CSS that comes out of build pipelines, SASS compilers, or design-to-code tools is often correctly written but inconsistently formatted. Run it through here once and the whole file matches your team's style.
Pasted CSS that lost its formatting. CSS copied from a chat message, ticket, or PDF often arrives with broken line breaks. The beautifier reconstructs the structure.
Quick formatting before commit. When you don't have Prettier or Stylelint configured locally, this gives you the same clean output with a couple of clicks.
Paste your CSS
Any CSS — minified, mangled, or hand-written — works.
Set your indent size
2-space indent is the modern default (Airbnb, Google, and Prettier all use 2). Use tabs if your team prefers them.
Click Beautify
Or press Ctrl + Enter. The formatted code replaces your input in place.
Copy and paste back into your editor
The Copy button at the top of the editor pane sends the result to your clipboard.
Newline between rule blocks. When on, each rule gets a blank line between it and the next — easier to scan in long stylesheets. When off, rules are packed tighter — more rules fit on screen. On is the standard.
Selector separator newline. When on, comma-separated selectors each get their own line: h1,
then h2,
then h3 {. When off, they all stay on one line: h1, h2, h3 {. The one-per-line form is far easier to scan when you have five or six selectors grouped together.
Preserve newlines. When on, your intentional blank lines between logical sections survive the beautify pass. When off, all blank lines are stripped. Most developers want this on — those section breaks are usually meaningful.
Max preserve newlines. Caps how many consecutive blank lines are kept. "Allow 2" means three or more blank lines in a row get collapsed to two — useful when you've inherited a file with random vertical padding.
Will: fix indentation, add or normalize spacing inside declarations, separate rules onto new lines, split grouped selectors onto separate lines, collapse extra blank lines.
Won't: sort properties alphabetically, merge duplicate selectors, reformat colour values, remove unused rules, deduplicate properties, or fix syntax errors. For those, use a linter like Stylelint or a more aggressive tool like CSSO.
SCSS, SASS, LESS: partial support. Basic blocks format correctly, but nesting, mixins, variables, and other preprocessor-specific syntax may not be handled cleanly. Use a dedicated SCSS formatter for those.
Five Indent Sizes
Tabs or 2, 3, 4, or 8 spaces.
Selectors Per Line
Split h1, h2, h3 onto separate lines, or keep them grouped.
Keyboard Shortcut
Ctrl + Enter beautifies from anywhere.
Runs Locally
Nothing leaves your browser.
Live Character Count
See input/output size in real time.
Free Forever
No signup, no limits, no watermark.
body{margin:0} and body { margin: 0; } identically. The visual output of your page will be exactly the same.js-beautify library runs entirely in your browser. The library itself is loaded from a CDN once, but your CSS stays on your device. Open DevTools → Network and click Beautify — you'll see no outgoing requests.@container, @layer, @supports, modern selectors like :has() and :is() — they all format correctly.