Upload your CSS and format it into a clean, easy-to-read stylesheet, then download the formatted CSS file instantly.
.css file from your project. The parser handles a single rule, a 50K-line framework bundle, or anything in between. No sign-up, no file size cap that matters for normal stylesheets.tabWidth: 2 and the prevailing front-end convention). Switch to 4 spaces for AOSP / Google style, or tabs if your .editorconfig says indent_style = tab. Optional toggles place each selector in a multi-selector group on its own line, add a blank line between rule blocks, or sort properties alphabetically.@media, @supports, @keyframes, @layer, @container, @import, @charset — keep their declaration order, which matters because CSS cascade layers stack in the order they first appear..css file. Output is lossless — pipe it back through the CSS Minifier for production with no risk of behavioral changes.CSS formatting (a.k.a. beautifying, pretty-printing) restructures whitespace so a stylesheet's visual layout mirrors its logical structure. The formatter is lossless: every selector, declaration, comment, and at-rule survives unchanged — only spaces, tabs, and newlines move. That makes it safe to round-trip between minified and formatted forms during dev and deploy.
app.abc123.css is painful when everything sits on one 400 KB line. Formatting restores the structure so you can trace cascade interactions DevTools can't always untangle on its own.| Option | Default | Notes |
|---|---|---|
tabWidth |
2 | Front-end convention; 4 for AOSP-style |
useTabs |
false | Spaces unless your .editorconfig says otherwise |
printWidth |
80 | Soft line-length cap |
singleQuote |
false | Double quotes for strings and content: values |
| URL quoting | preserved | url("...") quotes are intentionally not flipped — Prettier preserves them to avoid breaking imports |
| Selectors | one per line | h1, h2, h3 { } → each selector on its own line |
| Short rules | single-line | Rule blocks with 1 short declaration may stay one-line |
| Trailing newline | yes | POSIX-compliant final newline |
| Comments | preserved | /* ... */ and // ... (Less/SCSS) survive |
| Tool | Type | Best For | Notes |
|---|---|---|---|
| Prettier | Opinionated formatter | Most projects, zero-config | Defaults this page mirrors; PostCSS parser under the hood |
| Biome | Formatter + linter (Rust) | Monorepos wanting one binary | Faster than Prettier; CSS support shipped in Biome 1.8 (2024) |
| stylelint | Linter | Catching real bugs | Doesn't format opinions — pairs with Prettier via stylelint-prettier |
| stylelint-prettier | Bridge plugin | Single-command CI lint+format check | Surfaces Prettier diffs as stylelint errors |
| Lightning CSS | Parser/transformer (Rust) | Bundlers (Parcel, Vite via plugin) | Prints minified or expanded; not opinionated about style |
| dprint | Formatter (Rust) | Polyglot repos | Has a dprint-plugin-malva for CSS/SCSS/Less |
| CSSTree-based tools | Library | Custom tooling | The parser PostCSS competitors and many online tools build on |
The split that matters: Prettier formats, stylelint lints. They are explicitly complementary — Prettier reformats whitespace and structure with one opinion per option; stylelint catches duplicate properties, invalid units, vendor-prefix mismatches, and naming-convention violations that a formatter ignores.
Both, ideally. Prettier handles whitespace, line length, quote style, and bracket placement — the mechanical stuff. Stylelint handles correctness — duplicate selectors, shorthand-vs-longhand conflicts, color-format consistency, BEM naming rules, and dozens of other lint categories. The standard setup uses both with stylelint-prettier as the bridge so a single stylelint --fix pass runs lint rules and applies Prettier formatting.
No — this is a CSS source formatter. Tailwind class sorting happens in your HTML / JSX class attributes, not in the compiled CSS. For that, install prettier-plugin-tailwindcss and add it to your Prettier config. It sorts classes in class, className, framework-specific bindings (:class, [ngClass]), and inside @apply directives, following Tailwind's recommended order (base → components → utilities, with overrides last).
Not directly through this tool — it expects standalone CSS as input. Prettier itself has built-in support for tagged-template-literal CSS in styled-components and Emotion's css helper when you run it on .js / .ts / .tsx files. One caveat: when a template literal contains ${interpolation} placeholders between quote characters, Prettier preserves the original quote style rather than risk breaking the interpolated value.
Shift+Alt+F on Windows/Linux, Shift+Option+F on Mac. The Command Palette command is Format Document, and Format Document With... lets you pick between multiple registered formatters when both Prettier and the built-in CSS formatter are installed. Pair it with "editor.formatOnSave": true in settings.json for automatic formatting on every save.
Generally no. Format it locally for inspection, but don't commit a beautified copy of bootstrap.min.css or tailwind.min.css to your repo — you'll diverge from upstream and break source maps that reference original line numbers. If you need to read or patch vendor CSS, format a working copy outside the dependency tree. For your own production builds, run the CSS Minifier as a build step instead of committing the minified form.
@charset, @import, or @layer order?No — declaration order is preserved exactly. This matters because CSS has hard ordering requirements: @charset must be the very first byte of the file, @import rules must precede any other rules except @charset and @layer statements, and cascade layers stack in the order they first appear. Reordering any of these silently changes how the browser parses or cascades the stylesheet, so the formatter only touches whitespace inside each block.
@layer cascade layers and @container queries?Yes. Modern at-rules (@layer, @container, @scope, @starting-style) are parsed as first-class nodes rather than treated as opaque blocks. Nested rules inside a @layer or @container are indented one level deeper than their parent, matching how Prettier and Biome handle them. CSS nesting (without preprocessor — the native & parent selector) is also recognized and indented correctly.
Standard CSS (including modern features like nesting, @layer, @container, custom properties, :has(), and oklch() colors) is fully supported. SCSS and Less syntax — variables, mixins, @extend, @include, single-line // comments — may not round-trip cleanly here; use Prettier directly via your editor or npx prettier --write **/*.scss with the PostCSS parser, which is the canonical setup for those preprocessors.
Each formatter encodes one team's opinions. Prettier picks defaults that minimize escapes and line-break thrash; Biome targets Prettier-equivalent output with a few documented divergences; stylelint can be configured to enforce almost anything. If consistency across a team matters more than which opinion is "right," pick one tool, commit its config (.prettierrc, biome.json, .stylelintrc.json), and run it in CI. Related: try the CSS Minifier, HTML Formatter, or JSON Formatter for adjacent jobs in the same browser-only pipeline.