Why format CSS?
When CSS is minified, copied from DevTools or written by many hands, it becomes hard to read: several rules on one line, inconsistent spacing, declarations without line breaks. Formatting puts each selector and declaration on its own line with consistent indentation and spacing, so you can scan the stylesheet, compare versions and spot mistakes.
This tool uses Prettier and supports three languages: plain CSS, SCSS and Less. The parser is chosen automatically from the file extension (.css, .scss, .less) or with a selector when you paste code, so nesting, variables and mixins are formatted correctly. You choose the indentation (2 spaces, 4 spaces or tabs) and the line width (80, 100 or 120), after which long selector lists and values wrap.
Formatting only changes whitespace and line breaks; selectors, properties and values stay the same, so the styles behave exactly as before. If the parser finds a syntax error, such as a missing brace, you see its message so you can fix it.
A consistent format is also useful in teams: when everyone formats the same way, diffs only show real changes and code reviews focus on what the styles do instead of on spacing. It is equally handy for one-off jobs, such as reading the stylesheet of a site you are inspecting. Your stylesheet is formatted in your browser and never uploaded. You get one free try per tool: one file or one pasted text. After that you can still re-process the same text with different options, but new input needs ToolStudio Pro, which gives unlimited use of every tool, several files at once downloaded together in a ZIP, and no ads. You can cancel anytime.
How to format CSS
- Paste your code or drop a .css, .scss or .less file.
- If you pasted code, select the language: CSS, SCSS or Less.
- Choose indentation and line width.
- Run the formatter, then copy or download the result.
When a CSS formatter helps
- Reading the minified stylesheet of a website.
- Cleaning up CSS copied from DevTools or a design tool.
- Unifying the style of SCSS or Less partials written by different people.
- Preparing readable code for a review, a tutorial or a bug report.
- Comparing two versions of a stylesheet after formatting both the same way.
Can formatting restore the original CSS?
It restores the layout of the code, not what the minifier removed. Comments are gone for good, and if the minifier merged rules (as CSSO does with structural optimisation) the formatted file will show the merged rules, not the original ones. For your own work, always keep the source and treat the minified file as a build output.
Frequently Asked Questions
Does it support SCSS and Less?
Yes. The parser is picked from the file extension, or you can select CSS, SCSS or Less when you paste code.
Does formatting change how my styles work?
No. Only whitespace and line breaks change; selectors, properties and values are the same.
Can I unminify CSS?
Yes, paste the minified CSS and it comes back indented. Removed comments cannot be recovered.
Is my CSS uploaded?
No, everything runs in your browser.
Is it free?
One file or one pasted text is free and you can re-format it with other options. For new input you need ToolStudio Pro: unlimited use, several files at once in a ZIP and no ads.