How does the CSS formatter handle vendor prefixes like -webkit- and -moz-?

Prettier preserves all vendor-prefixed properties exactly as written. It does not add or remove prefixes — that is the responsibility of tools like Autoprefixer. The formatter simply re-indents and restructures your existing declarations, keeping every -webkit-, -moz-, and -ms- property intact in its original order.

Does the formatter correctly handle media queries and nested at-rules?

Yes. Prettier formats @media, @supports, @keyframes, and other at-rules with proper indentation for their inner rule blocks. Complex nested media queries with multiple conditions are broken across lines with consistent spacing, making them far easier to read and maintain than single-line versions.

Can I use this formatter for SCSS or Less, or is it CSS only?

The current tool is configured for standard CSS. Prettier does support SCSS and Less parsers separately, but the CSS Formatter on ToolJiffy targets plain CSS syntax. For SCSS with nesting, mixins, and variables, you would need a dedicated SCSS formatter configured with Prettier's "scss" parser.

Will the formatter sort or reorder CSS properties?

No. Prettier intentionally does not reorder CSS properties — it only controls whitespace, line breaks, and formatting structure. Property order is a style decision that varies between teams (alphabetical vs. grouped by type), and Prettier leaves that choice entirely to the developer or a separate linting rule.

Can I paste minified CSS and have it fully expanded?

Yes, minified CSS is fully supported. Whether your input is a compressed production stylesheet with all whitespace removed or a single-line output from a CSS-in-JS library, Prettier parses the token stream and outputs properly formatted, multi-line CSS with consistent spacing and indentation.

What formatting rules does Prettier apply to CSS declarations?

Prettier normalises spacing around colons in property declarations (property: value), places each declaration on its own line, adds a trailing semicolon after the last declaration in a rule, and ensures there is exactly one space before the opening brace of a rule block. Colour values and numbers are also normalised to a consistent representation.

Which version of Prettier powers the CSS formatter?

The tool uses Prettier 3.x (MIT-licensed), which includes an updated CSS parser with improved handling of modern syntax such as CSS nesting, custom properties (--variables), and the @layer rule. The version is pinned in the project dependencies for reproducible, stable formatting results.

How fast is the CSS formatter for large stylesheets?

Since Prettier runs entirely in your browser via WebAssembly, there is no server round-trip. Even large stylesheets with thousands of rules format in well under a second on modern hardware. The tool is also offline-capable after the first load, so slow or restricted network connections have no impact on speed.

CSS Formatter

Format and beautify CSS code instantly in your browser with Prettier (the industry-standard formatter, MIT-licensed). No uploads, no sign-up, works offline.

100% Private — Runs entirely in browserInstant calculation & resultFree, no sign-up

Unknown tool: undefined

Why use an online CSS formatter for readable, consistent stylesheets?

Poorly structured CSS is one of the hardest codebases to maintain at scale. When declarations are crammed onto single lines, rule blocks lack consistent spacing, or minified production CSS finds its way into source control, identifying specificity conflicts, debugging cascade issues, and onboarding new team members all become significantly harder. ToolJiffy's CSS Formatter applies Prettier's battle-tested formatting rules in a single click — no configuration, no installation, no server required.

Powered by Prettier (MIT): The same CSS formatting engine embedded in VS Code, WebStorm, and every major editor extension — now available directly in your browser without installing a single package.
Fully offline after first load: Prettier runs via WebAssembly and is cached by your browser after the initial visit. Your stylesheets are never uploaded anywhere, and the tool works even without an active network connection.
Expands minified CSS instantly: Paste a compressed production stylesheet and get back fully indented, human-readable CSS. Ideal for inspecting third-party libraries or debugging build tool output.
Deterministic output for cleaner diffs: Prettier's output is always the same for the same input. Running the formatter across your team eliminates meaningless whitespace-only differences in pull request diffs.

Prettier's CSS parsing architecture

Prettier parses CSS using its built-in PostCSS-based parser, which produces a full abstract syntax tree (AST) representing every rule, declaration, at-rule, and comment in your stylesheet. The printer then traverses this tree and re-emits each node according to Prettier's formatting algorithm. Declarations are placed one per line, each ending with a semicolon. Rule blocks have exactly one space before the opening brace and a blank line between adjacent top-level rules. Long selector lists are broken so each selector occupies its own line, making complex multi-selector rules much easier to scan.

Prettier also normalises certain values: hexadecimal colours are converted to lowercase, unnecessary leading zeros in decimal values are removed, and shorthand properties likemargin: 0px 0px 0px 0px are left to the developer to simplify manually, since Prettier avoids semantics-altering transformations. The result is visually consistent CSS that reads like it was written by a single careful author, even when the real source came from multiple contributors or a code generator.

Client-side security for private stylesheets

Your CSS code is processed entirely within your browser — it is never sent to any server, stored in a database, or transmitted over the network. This matters when your stylesheets contain proprietary design tokens, internal brand variables, or structural details about your application's layout that you would prefer to keep confidential.

The Prettier WebAssembly bundle is fetched once and stored in your browser cache, so repeat visits and formatting sessions require no external requests. This also makes the tool suitable for use in air-gapped environments or on corporate networks with strict egress filtering.

Step-by-step guide to formatting CSS code

Paste your CSS into the left input panel. This can be anything from a small snippet of a single rule block to a full production stylesheet — minified or already partially formatted.
Click Format. Prettier parses your CSS, rebuilds the AST, and writes the formatted output to the right panel in under a second. Syntax errors are reported with a clear message identifying the problematic line.
Copy or download. Click Copy to send the formatted CSS to your clipboard for immediate use in your editor, or use the Download button to save it as a.css file ready to commit to source control.

Formatting CSS vs. minifying CSS — when to use each

Formatted CSS belongs in your source repository: it is readable by humans, reviewable in pull requests, and easy to debug in browser DevTools. Minified CSS — with all whitespace and comments stripped — belongs in your production build, where file size directly affects page load time. Modern bundlers (Vite, webpack, Parcel) handle minification automatically as part of their build pipeline, so there is no reason to commit minified CSS to source control.

A practical workflow is to keep your source stylesheets formatted using this tool (or a Prettier pre-commit hook configured the same way), and let your build tool generate the minified production output. When you receive a minified CSS file from a third party and need to understand or modify it, paste it into this formatter first to make it readable before making any changes.

Explore related developer utilities

Format the HTML that your CSS styles with the HTML Formatter, which uses the same Prettier engine for consistent markup. For inline styles or JSON-based design token files, the JSON Formatter pretty-prints and validates your data structures. Need to compress a finished stylesheet for deployment? TheCSS Minifier strips all unnecessary whitespace and comments. Writing JavaScript that manipulates styles? The JavaScript Formatter keeps your script files just as clean as your stylesheets.

Frequently Asked Questions

How does the CSS formatter handle vendor prefixes like -webkit- and -moz-?
Prettier preserves all vendor-prefixed properties exactly as written. It does not add or remove prefixes — that is the responsibility of tools like Autoprefixer. The formatter simply re-indents and restructures your existing declarations, keeping every -webkit-, -moz-, and -ms- property intact in its original order.
Does the formatter correctly handle media queries and nested at-rules?
Yes. Prettier formats @media, @supports, @keyframes, and other at-rules with proper indentation for their inner rule blocks. Complex nested media queries with multiple conditions are broken across lines with consistent spacing, making them far easier to read and maintain than single-line versions.
Can I use this formatter for SCSS or Less, or is it CSS only?
The current tool is configured for standard CSS. Prettier does support SCSS and Less parsers separately, but the CSS Formatter on ToolJiffy targets plain CSS syntax. For SCSS with nesting, mixins, and variables, you would need a dedicated SCSS formatter configured with Prettier's "scss" parser.
Will the formatter sort or reorder CSS properties?
No. Prettier intentionally does not reorder CSS properties — it only controls whitespace, line breaks, and formatting structure. Property order is a style decision that varies between teams (alphabetical vs. grouped by type), and Prettier leaves that choice entirely to the developer or a separate linting rule.
Can I paste minified CSS and have it fully expanded?
Yes, minified CSS is fully supported. Whether your input is a compressed production stylesheet with all whitespace removed or a single-line output from a CSS-in-JS library, Prettier parses the token stream and outputs properly formatted, multi-line CSS with consistent spacing and indentation.
What formatting rules does Prettier apply to CSS declarations?
Prettier normalises spacing around colons in property declarations (property: value), places each declaration on its own line, adds a trailing semicolon after the last declaration in a rule, and ensures there is exactly one space before the opening brace of a rule block. Colour values and numbers are also normalised to a consistent representation.
Which version of Prettier powers the CSS formatter?
The tool uses Prettier 3.x (MIT-licensed), which includes an updated CSS parser with improved handling of modern syntax such as CSS nesting, custom properties (--variables), and the @layer rule. The version is pinned in the project dependencies for reproducible, stable formatting results.
How fast is the CSS formatter for large stylesheets?
Since Prettier runs entirely in your browser via WebAssembly, there is no server round-trip. Even large stylesheets with thousands of rules format in well under a second on modern hardware. The tool is also offline-capable after the first load, so slow or restricted network connections have no impact on speed.