CSS Formatter
Format and beautify CSS source code for easier reading, review and maintenance directly in your browser.
CSS Formatter online
Reformat compressed or messy CSS into a readable layout — one declaration per line, braces on their own lines — for stylesheets you inherited, minified, or pasted out of a build.
How to use this tool
- Paste your CSS into the input box.
- Click Run Tool. Rules are expanded onto separate lines with a two-space indent inside each block.
- Copy the formatted CSS from the result panel.
Common uses
Reading a minified stylesheet from a production site, cleaning up CSS copied from DevTools or a generator, reviewing a colleague's stylesheet in a diff, and making hand-edits safe in a file that was written as one long line.
How it works
The formatter works textually: it strips comments, then expands the code around its punctuation — every { opens a block on a new line, each declaration ends with a semicolon and a newline, and } returns to its own line. It does not parse the cascade, reorder rules or validate properties, which makes it fast and predictable: what goes in is what comes out, only laid out. One consequence to know: comments are removed, so if your file's comments carry licence headers or section notes you need, save them first.
Worked example
The minified rule
.card{margin:0 auto;padding:12px 16px;color:#333}becomes
.card {
margin:0 auto;
padding:12px 16px;
color:#333
}Declarations keep their original spacing around values (the compact margin:0 stays tight) — the formatter lays out structure, it does not re-space every token.
Privacy and browser processing
Your CSS is formatted in your browser with JavaScript — it is never uploaded or stored.
Frequently asked questions
Why did my comments disappear?
This formatter removes /* */ comments as part of normalising the text. If comments matter (licences, section markers), keep a copy of the original or re-add them after formatting.
Does it indent nested rules inside @media?
Blocks are laid out with a flat two-space step rather than progressive depth indentation, so rules inside @media sit at the same indent as top-level rules. The structure stays readable; deeply nested preprocessors output (SCSS/LESS) is better formatted by their own toolchains.
Will it fix invalid CSS?
No — it rearranges text, it does not validate. A missing brace goes in missing and comes out missing, just on its own line where it is easier to spot.
Does formatting change how the CSS renders?
No. CSS ignores the whitespace being rearranged, and selectors, properties and values are untouched — only line breaks, spacing around punctuation and comments change.
Is my code uploaded?
No. Formatting runs in your browser; your stylesheet never leaves the page.