CSS Formatter
Format CSS in your browser.
This runs in your browser. Nothing is uploaded.
Drop a file here or choose oneChoose file
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 this page and never uploaded. 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 are part of the same local-first toolbox and can be used without uploading the source you are reviewing.
FAQ
Does CSS Formatter upload my stylesheet?
No. CSS is tokenized and formatted in your browser. Pasted text and dropped CSS files stay on your device.
Is CSS Formatter a validator or linter?
No. It changes layout and whitespace only. It does not validate every CSS rule, check browser support, find unused selectors, or report project style violations.
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 for unusual or incomplete CSS.
Are strings, comments, url(), and calc() preserved?
Yes. Comments and quoted strings remain intact. Common url() and calc() values are protected so braces, semicolons, and parentheses inside them do not become stylesheet structure.
Can I minify CSS as well as format it?
Yes. Minify collapses whitespace outside strings and comments. It does not remove comments or optimize values, colors, selectors, or duplicate rules.
Can I try a sample or drop a CSS file?
Yes. Sample loads a small body and card stylesheet. You can also choose a local .css file. The browser reads it locally and does not upload it.
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. Run your own build checks for production stylesheets.