CSS Formatter
Reprint minified or inconsistent CSS as a clean, consistently indented stylesheet using Prettier.
Your CSS
Formatted CSS
Stylesheets rarely stay tidy. A file passes through a build step, a copy-and-paste from DevTools, a colleague who indents with tabs and a framework snippet that arrived on a single line, and within a few weeks nobody can see the structure any more. Reading a minified stylesheet to work out which rule sets padding on .card is miserable work, and diffs against a file with mixed indentation are worse.
This formatter runs Prettier 3.9.6 with its PostCSS parser, entirely inside your browser. Prettier parses your stylesheet into a syntax tree and prints that tree again from scratch, so the output is determined by the rules of the printer rather than by whatever the file looked like when you pasted it. That is the important thing to understand before you use it, and the reason the result sometimes surprises people: this is not a tool that tidies your formatting, it is a tool that replaces your formatting.
How to use the css formatter
- 1
Paste or upload your stylesheet
Drop a
.cssfile onto the input pane, use Upload File, or paste directly — a single minified line is fine, and so is a 5,000-line design system. The Prettier PostCSS parser is around 40 KB gzipped and is fetched the first time you format on this page, then cached. - 2
Pick your indentation
Two spaces, four spaces or tabs. Prettier uses this as its
tabWidthanduseTabssetting, and it applies to nested rules, at-rule blocks and wrapped value lists alike. Change it and the output reprints immediately, so you can compare conventions side by side. - 3
Copy, download or diff the result
Copy CSS puts clean plain text on your clipboard with no syntax-highlighting markup attached. Download CSS saves it with a
.cssextension. If you are checking the change into version control, run the original and the output through the diff tool first so you can see exactly what moved.
What Prettier changes, and what it never touches
Prettier is deliberately opinionated. It reprints from the abstract syntax tree, which means most of your existing whitespace decisions are discarded by design. Expect the following to change:
- Indentation and line breaks. One declaration per line, one selector per line in a selector list, a space after every colon, a semicolon after every declaration including the last one in a block.
- Blank lines. Runs of empty lines collapse to a single blank line. A deliberate three-line gap between sections will not survive.
- Quotes. String values and
url()arguments are normalised to double quotes unless the content itself contains a double quote. - Long values. A comma-separated list — a font stack, a multi-stop gradient, a stack of shadows — is wrapped across lines once it exceeds the 80-column print width.
What Prettier does not do is at least as important, because CSS is order-dependent and a formatter that reorders anything would be dangerous:
- Declaration order is preserved exactly. Later declarations override earlier ones in the cascade, so reordering would change rendering. Nothing is sorted alphabetically or by property group.
- Rule order is preserved exactly. Specificity ties are resolved by source order, so rules stay where you put them.
- Values are not rewritten.
#ffffffis not shortened to#fff,0.5remkeeps its leading zero, andmargin: 0 0 0 0is not collapsed tomargin: 0. - Comments are kept. Both the
/* … */content and its position relative to the surrounding rules survive the round trip.
Modern CSS syntax it handles
The PostCSS parser Prettier uses is current with the CSS features shipping in browsers today. Custom properties in :root, nested selectors using native CSS nesting and the & reference, @layer declarations and blocks, @container queries with container-type and cqi units, @supports feature tests, @property registrations, cascade-layer imports, logical properties such as margin-block-start, and functional notation including clamp(), min(), color-mix() and oklch() all format correctly.
Grid templates get particular care: a grid-template-areas block written as a stack of quoted strings keeps one row per line, which is the only way that property is readable at all.
If the parser hits something it genuinely cannot read — an unclosed brace, a stray semicolon inside a selector, a truncated file — you get the message and the line and column of the failure rather than silently mangled output. Nothing is guessed at or repaired.
Privacy and what is not included
Everything happens in a Web Worker on your own machine. The stylesheet you paste is never uploaded, logged or stored, which matters more than it sounds: internal CSS routinely leaks unreleased feature names, customer names in class names, and internal hostnames in url() references. You can confirm this by opening DevTools, switching to the Network tab and formatting — after the Prettier plugin loads, no further requests are made.
Three things this page explicitly does not do, because implying otherwise would waste your time: it does not lint (there is no Stylelint here, so no warnings about duplicate properties or invalid values), it does not autoprefix (no vendor prefixes are added or removed), and it does not transpile modern syntax down for older browsers. It is a formatter. For minification, use the CSS minifier, which is a separate, deliberately conservative tool.
CSS Formatter FAQ
Why did the formatter change things I did not want changed?
Because Prettier reprints from the syntax tree rather than adjusting your text. Line breaks you added for emphasis, aligned columns of values, and extra blank lines are all discarded and regenerated by the printer. The output is a function of the parsed CSS and your indentation setting, nothing else. That determinism is the point — two developers formatting the same file always get byte-identical results.
Does it sort or reorder my properties?
No, and it never will. CSS resolves conflicts by source order, so moving a declaration can change what renders. Prettier only changes whitespace, quote style and line wrapping; the sequence of rules and declarations is exactly as you wrote it.
Can it handle SCSS or Less syntax?
Not on this page. The CSS parser will fail on SCSS variables, nesting with parent selectors, mixin calls and Less operations. Use the SCSS formatter or the Less formatter instead — each loads the parser configuration appropriate to that dialect.
Is my CSS sent to a server?
No. Prettier standalone runs as JavaScript in your browser, inside a Web Worker so the page stays responsive on large files. There is no upload step and no server-side component that could store anything.
Will it fix broken CSS?
No. If the stylesheet cannot be parsed you get an error with the position of the problem. If it parses but contains a nonsense property such as colour: red, that declaration is formatted and passed through unchanged — validity is a linter question, not a formatter question.