Tools
CSS Code Formatter
Paste your CSS code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the CSS formatter
This tool pretty-prints CSS: paste in a stylesheet, minified or just inconsistently indented, and it reformats it with consistent indentation, one declaration per line, and normalized spacing around colons and braces. It also lowercases hex colors so #FFFFFF becomes #ffffff, and normalizes quotes to double quotes inside url() and font-family values. Formatting runs entirely in your browser via Prettier's standalone build; the stylesheet you paste is never sent to a server.
Under the hood this is Prettier 3's standalone build, not a hand-rolled regex formatter. The page dynamically imports prettier/standalone plus prettier/plugins/postcss — the same PostCSS-based plugin that also powers the LESS and SCSS formatters, since Prettier ships one parser package for all three. The standalone build skips Node's fs module, which is what lets it run in the browser at all. The Tab size control maps directly to Prettier's tabWidth option. The Semicolons checkbox visible on the JavaScript and TypeScript formatters doesn't appear here, because CSS declarations always end in ; and Prettier has no option to change that.
Reach for this when you have CSS in a form you can't read comfortably: output copied from a browser's computed-styles panel, a minified vendor stylesheet, or a build artifact pasted into a bug report. It also doubles as a syntax check — an unclosed brace or stray token makes Prettier's parser throw a CssSyntaxError naming the exact line and column, instead of silently passing through broken CSS. That's useful before a code review or before committing a stylesheet you edited by hand.
Examples
/* input */
.card{background:#FFFFFF;padding:10px 20px;border-radius:4px}
.card .title{font-size:18px;font-weight:bold;color:#333}
/* output (tab size 2, default) */
.card {
background: #ffffff;
padding: 10px 20px;
border-radius: 4px;
}
.card .title {
font-size: 18px;
font-weight: bold;
color: #333;
}Verified against the tool's Prettier build: one declaration per line, consistent spacing, and #FFFFFF lowercased to #ffffff. Named color keywords like red are left untouched — only hex literals get case-normalized.
.card {
color: red;This exact input throws SyntaxError: CssSyntaxError: Unclosed block (1:1) instead of returning the input unchanged — checked against the tool's Prettier build. (1:1) is the line and column of the unclosed {.
/* input */
:root{--main-color:#FF0000;--gap:8px}
.btn{font-family:'Arial',sans-serif}
/* output (tab size 4) */
:root {
--main-color: #ff0000;
--gap: 8px;
}
.btn {
font-family: "Arial", sans-serif;
}This run used tab size 4 from the toolbar (default is 2). --main-color keeps its exact name since only values are normalized, and the single quotes around Arial become double quotes — Prettier's default for CSS strings.
Frequently asked questions
Does this tool minify CSS or only format it?
It only formats — the Format button re-indents and cleans up spacing but doesn't reduce file size. For minification, use the CSS Beautifier and Minifier, which pairs the same Prettier-based formatting with a one-click Minify.
Will formatting change how my CSS behaves?
No. It only changes whitespace, indentation, and a couple of cosmetic details — hex colors are lowercased and decimals gain a leading zero (.5em becomes 0.5em) — never selectors or the effective value of a property.
Is my CSS uploaded anywhere?
No. Formatting runs entirely in your browser through Prettier's standalone build; nothing you paste is sent to a server, logged, or stored.
Can I format SCSS or LESS with this page?
It parses plain CSS only. Simple stylesheets often go through fine, but SCSS-specific syntax like #{$variable} interpolation and LESS mixin calls like .mixin(); throw a syntax error here. Use the SCSS Code Formatter or LESS Code Formatter instead — same Prettier engine, configured for that syntax.
Why is there no Semicolons option like on the JavaScript formatter?
CSS declarations always end in a semicolon inside a rule block, and Prettier has no option to change that. The Semicolons checkbox only affects the JavaScript and TypeScript formatters, so it's hidden here.