CSS Formatter
Choose readable indentation or compact CSS output for review.
Runs in your browser. Nothing is uploaded.
Format CSS privately
CSS Formatter turns compressed or unevenly spaced stylesheets into a layout that is easier to scan. Paste CSS, choose Format, and review the output beside the original. Nothing is uploaded while you paste, format, copy, or download. The page does not load your stylesheets, visit referenced URLs, inspect your site, or send declarations to a server.
Keeping the work in the browser is useful for private design tokens, client styles, generated snippets, and code copied from a ticket or build artifact. The formatter only treats the input as text. It does not apply the stylesheet to this page, fetch fonts or images, or decide whether a selector is safe for your application.
Formatter versus validator and linter
A formatter changes whitespace, line breaks, and indentation. It is not a CSS validator and cannot prove that a stylesheet follows every browser rule. It is not a linter, so it does not check specificity problems, unused selectors, accessibility, browser support, naming conventions, or project style rules. Use a browser, build tool, validator, or linter for those jobs.
Readable output still helps with review. Declarations are separated at semicolons, nested at-rules receive clear indentation, and comments remain visible. If the input is unfinished or contains a feature outside the tokenizer's small set of rules, the result is a best-effort layout rather than a syntax report.
What this CSS formatter recognizes
The lightweight tokenizer keeps comments and quoted strings intact while it processes braces, parentheses, brackets, commas, colons, and semicolons. Rulesets open a new indented level. Nested blocks such as @media are indented again, and declarations receive a readable space after their colon. Common functions including url() and calc() are protected as text, while custom-property names and values remain visible for review instead of being rewritten.
Format uses two spaces by default, with four spaces and tabs available from the Indent control. Minify collapses whitespace outside strings and comments while retaining the CSS tokens themselves. It does not remove comments, rewrite colors, merge rules, or optimize values. A compact result is therefore easier to compare with the source than output from a full optimization pipeline.
Why it is not a full CSS parser
This is a lightweight CSS formatter for common stylesheet text, not Prettier or PostCSS. Use your project's formatter, validator, or linter for syntax and project-specific checks.
Paste, sample, or drop a local file
Select Sample to load a small body and card stylesheet, paste into CSS input, or choose a local .css file. The file is read in the page before formatting. Format and Minify operate on the current mode, Copy sends the visible output to your clipboard, and Download saves formatted.css. Press Ctrl+Enter on Windows or Linux, or Cmd+Enter on macOS, while the input field is focused to run the current action.
Related local tools
For scripts, try the JavaScript Formatter. To convert lengths while reviewing a stylesheet, use PX to REM. Both links use the same browser-based workflow for reviewing source.
FAQ
Can I format a dropped CSS file privately?
A dropped file is read as text and formatted in your browser. The stylesheet is never uploaded, and the formatter returns the result locally.
Is CSS Formatter a validator or linter?
No. It tokenizes CSS and changes layout and whitespace for pretty or minified output. It does not validate every rule, check browser support, find unused selectors, or enforce project style rules.
Does it format nested at-rules such as @media?
Yes. Braced at-rules and the rulesets inside them receive nested indentation in pretty mode. The tokenizer is best effort when the stylesheet is unusual or incomplete.
What happens inside CSS strings, comments, and functions?
Quoted strings, block comments, and protected functions such as url(), calc(), var(), rgb(), and gradient functions are treated as single tokens. Braces, semicolons, and parentheses inside those tokens are not treated as stylesheet structure.
Can I minify CSS as well as format it?
Yes. Minify removes whitespace between tokens while retaining comments, strings, and protected function contents. It does not optimize values, colors, selectors, or duplicate rules.
Which indentation options are available?
Pretty mode supports 2 spaces, 4 spaces, or a tab for each nesting level. The indent control is disabled in Minify mode because minified output does not use indentation.
Does this support every CSS dialect or preprocessor?
No. It is a lightweight tokenizer for common CSS text, not a browser parser, PostCSS pipeline, Sass compiler, or project-specific formatter. Use the checks from your own build for production stylesheets.