CSS Pretty Print
Paste minified or messy CSS and instantly get clean, consistently formatted output powered by Prettier.
Example
Minified input:
a{color:red;margin:0 auto}.box{padding:10px 20px;border:1px solid #ccc}Formatted output:
a {
color: red;
margin: 0 auto;
}
.box {
padding: 10px 20px;
border: 1px solid #ccc;
}How it works
Type or paste CSS into the input pane; it is parsed and re-printed with Prettier (parser "css") on every change. Click Copy output to grab the formatted result.
Good to know
CSS Pretty Print takes minified, hand-mangled, or inconsistently spaced stylesheet code and re-prints it with uniform two-space indentation, one declaration per line, and predictable brace and spacing rules. It runs the actual Prettier engine with its PostCSS parser directly in your browser, so the same formatting you'd get from a build pipeline or editor plugin is available without installing anything. It's aimed at front-end developers, students inspecting production CSS, and anyone who has copied a compressed stylesheet and needs to actually read it.
Reach for it when you've pulled a single-line minified CSS file out of a page's network tab, inherited a stylesheet with mixed tabs and spaces, or want a clean diff before committing. Because it reformats on every keystroke, you can paste, watch the output pane update, and copy the result in seconds rather than wiring Prettier into a project just to tidy one file.
Read the output as a faithful re-print, not a rewrite: Prettier normalizes whitespace, indentation, and line breaks but never changes your selectors, property values, or specificity, so the styling behavior is identical to the input. Watch the status line under the panes. A green "Formatted successfully" confirms the CSS parsed cleanly, while a red message reports the first parse error (for example an unclosed brace) and means nothing was reformatted until you fix it.
- Keep this in mind: the parser expects standard CSS. Preprocessor syntax like SCSS nesting, variables, or LESS mixins will trigger a parse error here, so use the dedicated SCSS or LESS formatters for those. The tool also preserves your declaration order rather than sorting properties alphabetically.
Frequently asked questions
Does my CSS get uploaded anywhere?
No. Formatting happens entirely in your browser using the Prettier library loaded on the page, so your CSS never leaves your machine.
Why do I see an error instead of formatted output?
Prettier needs syntactically valid CSS to parse it. The status line shows the parse error (such as an unclosed brace); fix the reported issue and it will format on the next keystroke.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between pretty printing and minifying CSS?
Pretty printing expands CSS with indentation, line breaks, and spacing so it is easy to read and edit, while minifying strips all of that whitespace to make the file as small as possible for faster downloads. They are opposite operations on the same code, and neither changes how the styles actually render.
Does formatting CSS change how my website looks?
No. Reformatting only adjusts whitespace, indentation, and line breaks. Selectors, property names, values, and their order stay the same, so the rendered result is identical to the original CSS.
Can this tool format SCSS or LESS files?
Not reliably. It uses Prettier's standard CSS parser, so SCSS nesting, variables, mixins, and other preprocessor syntax will usually cause a parse error. Use a dedicated SCSS or LESS formatter for those file types.
Why does Prettier use two-space indentation by default?
Two spaces is Prettier's default tab width and a widely adopted convention for CSS because it keeps deeply nested rules readable without long horizontal lines. This tool applies that default automatically.
How do I read a minified CSS file?
Paste the single-line minified code into a formatter like this one, which expands it into indented, line-by-line output. That makes selectors, blocks, and individual declarations visible so you can inspect or edit them.
Will pretty printing CSS reorder or remove my properties?
No. The tool preserves every declaration and keeps them in the exact order you wrote them. It does not sort properties alphabetically or delete duplicates; it only normalizes formatting.
Can I use this CSS formatter offline?
Yes, once the page and its Prettier library have loaded in your browser, formatting works without an internet connection because all processing happens locally on your device.
What does it mean when the formatter shows a parse error?
It means the input is not syntactically valid CSS, so Prettier cannot reformat it. The status line shows the first problem, such as an unclosed brace or stray character; fixing that line lets it format on the next change.
Related tools